fix: use text has state

Author: kerthical

frontend/app/routes/_index.tsx

@@ -74,6 +74,15 @@ export default function Index() {
   const navigation = useNavigation();
   const submit = useSubmit();
 
+  const [currentRecordingText] = useState(
+    [
+      "そんなこともよーせんのか。あかんたれやなー",
+      "あんじょーたのんまっさ",
+      "そんなところまでいかーしめへんやろ",
+      "いてるかいてへんかしらんけどいっぺん電話してみたらどないや",
+      "ほんまにそんなことあるんかいな",
+    ][Math.floor(Math.random() * 5)],
+  );
   const [recordingState, setRecordingState] = useState<RecordingState>("idle");
   const [error, setError] = useState<string | undefined>();
 
@@ -177,15 +186,7 @@ export default function Index() {
           </div>
         </div>
         <div className="text-xl tracking-[-0.6px] text-[#f7bb43] lg:text-4xl lg:text-center">
-          {
-            [
-              "そんなこともよーせんのか。あかんたれやなー",
-              "あんじょーたのんまっさ",
-              "そんなところまでいかーしめへんやろ",
-              "いてるかいてへんかしらんけどいっぺん電話してみたらどないや",
-              "ほんまにそんなことあるんかいな",
-            ][Math.floor(Math.random() * 5)]
-          }
+          {currentRecordingText}
         </div>
         <div className="relative flex w-full flex-col items-center justify-end gap-[12px]">
           <div className="relative flex w-full h-[90px] items-center justify-center overflow-visible">