常連

### 実現したいこと

- [ ] 動的ルーティングを使用して、記事詳細ページに、記事ID(postId)に紐づく、それぞれの記事を表示させたい

### 前提

Reactルーティングで簡単なページを作成しています。
App.jsx
Top.jsx
Posts.jsx(記事一覧ページ)
Post.jsx(記事詳細ページ)
Store.js(Redux)
記事一覧ページに表示している記事のIdに紐づいた記事を、動的ルーティングを使用して、記事詳細ページに表示させたいです。
記事はRedux（Store.js）で管理しています。



### 発生している問題・エラーメッセージ

```
Idの紐付け方が分かりません。
```

### 該当のソースコード

```ここに言語名を入力
import "./reset.css"
import AppStyle from "./App.module.css"
import { Routes, Route, Link } from "react-router-dom";
import Top from "./components/pages/top/Top";
import Posts from "./components/pages/posts/Posts";
import Post from "./components/pages/post/Post";
function App() {

  return (
    <div className={AppStyle.container}>
      <h1>React 7回目</h1>
      <nav className={AppStyle.nav}>
        <ul className={AppStyle.menu}>
          <li><Link to="/top">TOP</Link></li>
          <li><Link to="/Posts">記事一覧</Link></li>
          <li><Link to="/Post">記事詳細</Link></li>
        </ul>
      </nav>

      <Routes> 
        <Route path="/top" element={ <Top /> }></Route>
        <Route path="/posts" element={ <Posts /> }></Route>
        <Route path=":postId" element={ <Post /> }></Route>
      </Routes>
    </div>
  )
}

export default App
```

```
import postsStyle from "./posts.module.css"
import { useSelector } from 'react-redux';

const Posts =() => {

    const posts = useSelector((state) => state.posts);

    return (
        <div className={postsStyle.container}>
            <h2>記事一覧</h2>
            <div className={postsStyle.posts}>
                {posts.map((post) => (
                <div className={postsStyle.post} key={post.postId}>{post.postName}
                    <p className={postsStyle.post_text} key={post.postId}>{post.postDetail}</p>
                </div>
                ))}
            </div>
        </div>
    )
}

export default Posts
```
```ここに言語を入力
import postStyle from "./post.module.css"
import { useParams } from 'react-router-dom';


const Post =() => {

    const { postId } = useParams();

    return (
        <div className={postStyle.container}>
            <h2>記事詳細 {postId}</h2>
        </div>
    )
}

export default Post
```
```ここに言語を入力
import { createStore } from 'redux'

const initialState = {
    
  posts: [
    {
      postId: '1',
      postName: 'サンプル記事1',
      postDetail: 'サンプル記事1のテキスト',
    },
    {
      postId: '2',
      postName: 'サンプル記事2',
      postDetail: 'サンプル記事2のテキスト',
    },
    {
      postId: '3',
      postName: 'サンプル記事3',
      postDetail: 'サンプル記事3のテキスト',
    },
  ],
      
};

const reducer = (state = initialState) => {
    return state;
};

const store = createStore(reducer);
console.log(store.getState());

export default store;
```



React勉強中です。
至らない点も多々あるかと思いますが、ご教授いただけると幸いです。
宜しくお願い致します。


React Redux　記事IDに紐づく詳細記事を表示させたい

バージョンは忘れてしまったのですが、
古いバージョンのExpo +reactnativeで開発していました。

そのバージョンではコマンドプロンプトでexpo startで
expo developer toolsがwebブラウザで立ち上がり、エラーが発生時わかりやすく原因のコードファイルの行数までログで出してくれました。

流石にちょっと古すぎると思ったので、
アップデートで最新にしnpx expo startで起動しました。
どうやらexpo developer toolsが廃止になったようで、起動しません。

この状態での開発はコマンドラインにエラーは出るのですが原因までは詳細に出ず、
jキーで起動するデバッガーも同様の表示でしかないので使いにくいです。
以前のようにはならないのでしょうか。

ExpoCLIのエラーログが以前より使い勝手が悪くなりました

# Kuroshiroライブラリのエラーを解決したい

ReactにてKuroshiroライブラリを利用した文字列変換アプリを作成しておりましたが、
公式に習ってライブラリをインストールし、サンプルコードを実行したらエラーが発生したという状況です。
- npm install kuroshiro
- npm install kuroshiro-analyzer-kuromoji
```
import { type InputType } from "../@types/PagesTypes";
import Kuroshiro from "kuroshiro";
import KuromojiAnalyzer from "kuroshiro-analyzer-kuromoji";

const saveTypingData = (typingdata: InputType): void => {
  const kuroshiro = new Kuroshiro();
  kuroshiro
    .init(new KuromojiAnalyzer())
    .then(function () {
      return kuroshiro.convert(
        "感じ取れたら手を繋ごう、重なるのは人生のライン and レミリア最高！",
        { to: "hiragana" }
      );
    })
    .then(function (result: any) {
      console.log(result);
    });
};
export default saveTypingData;
```

#### 発生したエラー内容
```
Compiled with problems:
ERROR in ./node_modules/kuromoji/src/loader/DictionaryLoader.js 20:11-26
Module not found: Error: Can't resolve 'path' in '/Users/tanakakenta/Documents/ウェブ制作練習/JavaScript/ojako-typing/node_modules/kuromoji/src/loader'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }
```

### 解決に向けて試したこと

発生したエラー内容を調べていくうちにWebpackのバージョンアップに伴うモジュールの非互換である、ということがわかってきたので以下の記事を参考にして対処してみた。
[webpack4系から5系にアップデートした際の対応事項とかメモ](https://madogiwa0124.hatenablog.com/entry/2021/02/13/120741)
[React環境にて「BREAKING CHANGE: webpack < 5 used ~」を解決する方法](https://zenn.dev/decline/articles/40acac3e6a6282)
まずは必要そうなパッケージのインストール
- npm install 'path-browserify'
その後は依存関係を解決するべく、Webpack.config.jsを編集してみました。
```
 resolve: {
alias: {
        "path": "path-browserify", //: loaderエラーにより追記
      },
// または
fallback: { "path": false }, //: loaderエラーにより追記
// もしくは
 fallback: { "path": require.resolve("path-browserify") }, //: loaderエラーにより追記
}
```
そしてエラーが発生している利用箇所に対して読み込み文を追記
- import path from "path-browserify"; //:エラーにより追記
これらの方法を実施してみて一時的にですがUIが復活したので、MUIとRHFで用意したフォームをSubmitしてみたところ別のエラーが発生するように。。。
```
Uncaught runtime errors:
ERROR
invalid file signature:60,33
    at __webpack_modules__../node_modules/zlibjs/bin/gunzip.min.js.$.g (http://localhost:3000/static/js/bundle.js:87456:40)
    at xhr.onload (http://localhost:3000/static/js/bundle.js:44439:26)
```
Webpack.config.jsの編集によりコンパイルエラーはなくなりました。が今度は実行時エラーになってしまったのでこうなると何処を疑えばよいのか分からなくなりました。
此処から先は依存関係の泥沼になりそうなので、これらの依存関係の解消法をご教授願いたくよろしくお願い致します。

##### 補足情報（ツールのバージョンなど）
```package.json
{
  "name": "ojako-typing",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.8",
    "@mui/material": "^5.14.8",
    "@mui/styled-engine": "^5.14.8",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.48",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "axios": "^1.5.0",
    "js-hira-kata-romanize": "git+https://github.com/ojakomaru/js-hira-kata-romanize.git",
    "json-server": "^0.17.3",
    "kuroshiro": "^1.2.0",
    "kuroshiro-analyzer-kuromoji": "^1.1.0",
    "markdown-to-jsx": "^7.3.2",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "path-browserify": "^1.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.46.1",
    "react-router-dom": "^6.15.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "uuid": "^9.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/uuid": "^9.0.4"
  }
}
```
```tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["@emotion/react/types/css-prop"]
  },
  "include": ["src"]
}
```
```.d.ts
declare module 'kuroshiro';
declare module "kuroshiro-analyzer-kuromoji";
```

Kuroshiroライブラリのエラーを解決したい

javaScriptmのwindow.openで新ウィンドウを開くようにしております。

コードは以下のようなものになります。
```
window.open('/', null, "widht=800,height=800,scrollbars=yes,resizable=yes")
```

上記で新しいウィンドウでURLを開くことはできるのですが、
再度クリックした際に、最初にクリックして開いたウィンドウが更新されるような動きになっております。

実現したいのはクリックする度にその数だけ新ウィンドウが開かれるという動きです。
再度クリックした際に新たなウィンドウを開くことは可能でしょうか。

JavaScriptのwindow.open()で新ウィンドウを複数開く方法

### 実現したいこと

- [ ] constのuseStateでセットしたtokenの中身を正常にセットする

### 前提

TypeScriptでサーバと通信する簡易的なTodoシステムを作っています。
そこでサーバと通信する機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ

```
Authorization: `Token ${token}`
```
以下のコードの上記の部分でtokenの中身が```''```になってしまいます。

### 該当のソースコード

```typescript
import React, {useEffect, useState} from 'react';
import {InputToDo, ToDo} from './index';
import axios from "axios";

export class RoutineTask {
    id: number
    name: string

    constructor(id: number, name: string) {
        this.id = id
        this.name = name
    }
}
export const ToDoApp = () => {
    const [token, setToken] = useState<string>("");
    // stateを作成
    const [todos, setToDos] = useState<RoutineTask[]>([]);
    // 入力値をtodos(配列)に設定

    const syncRoutineTasksWithServer = () => {
        axios.get("/routine_tasks",{
            headers: {
                Authorization: `Token ${token}`
            }
        }).then((response) => {
            const routine_tasks = response.data.map((value: any) => {
                return new RoutineTask(value.id, value.name);
            })
            setToDos(routine_tasks);
        });
    }

    const getUserToken = async () => {
        let token = localStorage.getItem("token");
        if (!token){
            const response = await axios.post("/users");
            token = response.data.token
            localStorage.setItem("token", token || "");
        }
        setToken(token || "")
    };

    useEffect(() => {
        getUserToken().then(() => {
            syncRoutineTasksWithServer();
        })
    }, [])

    const addRoutineTask = (routine_task: RoutineTask) => {
        setToDos([...todos, routine_task]);
    };

    return (
        <div className="panel is-warning">
            <div className="panel-heading">
                ToDo
            </div>
            <InputToDo addRoutineTask={addRoutineTask} token={token}/>
            {todos.map(todo => (
                <ToDo
                    key={todo.id}
                    routine_task={todo}
                    syncRoutineTasksWithServer={syncRoutineTasksWithServer}
                    token={token}
                />
            ))}
        </div>
    );
}
export default ToDoApp;
```

### 試したこと

ブレークポイントを設置し、```setToken(token || "")```の部分でtokenに正常な中身が設定されていることを確認しました。
また```Authorization: `Token ${token}```の部分よりも先に```setToken(token || "")```が呼ばれていることを確認しました。
ただ何故か2度呼び出されているのは気になっています。
また```const [token, setToken] = useState<string>("")```にもブレークポイントを設置したところ、まず先にここが２度呼ばれてその後、```setToken(token || "")```が２度呼ばれて、その後なぜか```const [token, setToken] = useState<string>("")```が再度２度呼ばれて、その後```Authorization: `Token ${token}```が２度呼ばれるという現象を確認しています。
私の推測では```const [token, setToken] = useState<string>("")```が呼ばれたせいで値が初期化されてしまっている可能性があると思っているのですが、なぜここが４度も呼ばれるか原因がわかっていないので対処できておりません。


Reactでconstにセットした値が取得できない

### 実現したいこと

- [ ] Todoリストの情報を「localStorage」に保存して、画面を更新してもデータが残るようにしたい

### 前提
Reactで簡単なTodoListを作成しています。
親コンポーネント：App.js
子コンポーネント：Input.js/TodoList.js/Button.js
で生成しています。


### 該当のソースコード

```ここに言語名を入力
import './App.css';
import { useState } from 'react';
import Input from './components/Input';
import TodoList from './components/TodoList';

function App() {

  const [taskList, setTaskList] = useState([]);

    return (
      <div className='List'>
        <div className='inner'>
          <h1>今日やること</h1>
          <div>
            <Input taskList = {taskList} setTaskList = {setTaskList} />
            <TodoList taskList = {taskList} setTaskList = {setTaskList} />
          </div>   
        </div>
      </div>
  );
}

export default App;
```
```ここに言語を入力
import { useState } from 'react';
import Button from "../components/Button";
import '../App.css';

const Input = ({taskList, setTaskList}) => {

  const [inputText, setInputText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    if (inputText.length !== 0) {
      setTaskList([
        ...taskList,
        {
          id: taskList.length,
          text: inputText,
          completed: false
        }
      ]);
      console.log(taskList);
      setInputText('');
    }
  }

  const handleChange = (e) => {
    setInputText(e.target.value);
  }


  return (
    <div className='input'>
      <form onSubmit = {handleSubmit}>
        <input type='text' onChange={handleChange} value={inputText} />
        <Button 
          backgroundColor={inputText ? '#008CFF' : '#C1C1C1'} 
          btnText="追加"  
          marginLeft='20px'>
        </Button>
      </form>
    </div>
  )
};


export default Input;
```

```ここに言語を入力
import { useState } from "react";
import Button from "../components/Button";


const TodoList = ({taskList, setTaskList}) => {

  const handleDelete = (id) => {
    setTaskList(taskList.filter((task) => task.id !== id));
  }

  const handleCompleted = (id) => {
    setTaskList(taskList.map((task) => {
      if(id === task.id){
        return {
          ...task,
          completed: !task.completed
        };
      }
      return task;
    }))
  };


  return (
    <div className='todoList'>
      <div className='todos'>
        {taskList.map((task, index) => (
          <div className={`todo ${task.completed ? 'completed' : ''}`} key={index}>
            <div className='todoText'>
              <span>{task.text}</span>
            </div>
            <Button 
              eventClick={() => handleDelete(task.id)} 
              btnText="削除"
              backgroundColor="#FF3700" >
            </Button>
            <Button 
              eventClick={() => handleCompleted(task.id)} 
              btnText="完了"
              backgroundColor={task.completed ? '#C1C1C1' : '#008CFF'}
              marginLeft='20px'>
            </Button>
          </div>
        ))}
      </div>
    </div>

  )
}


export default TodoList;
```
```ここに言語を入力
import styled from 'styled-components';

const StyleButton = styled.button ({
  border: 'none',
  borderRadius: '4px',
  fontFamily: 'ヒラギノ丸ゴ ProN',
  fontWeight: '400',
  fontSize: '14px',
  color: '#FFFFFF',
  width: '57px',
  height: '32px',
})


const Button = (props) => {
  const contentstyle ={
    backgroundColor: props.backgroundColor,
    marginLeft: props.marginLeft,
  };


  return (
    <>
      <StyleButton onClick={props.eventClick} style={contentstyle} >{props.btnText}</StyleButton >
    </>
  )
};

export default Button;
```

### 試したこと

// 取得
localStorage.getItem('key')
 
// 保存
localStorage.setItem('key', 'value');
 
// 削除
localStorage.removeItem('key');

上記を使って設定していくというところまでは分かりましたが、何をどこに書いていけばいいか分かりません。

### 補足情報（FW/ツールのバージョンなど）

React初心者です。
宜しくお願い致します。


React Todoリストの情報を「localStorage」に保存して、画面を更新してもデータが残るようにしたい

### 実現したいこと

chakra UIを使えるようにしたいです
基本的な質問になります。

### 前提

- Reactをインストール済み（インストールした初期の段階でほとんど変えていません）
- chakra UIをインストール済み（node_modules / @chakra-uiというところに入っています）


### 発生している問題・エラーメッセージ

publicフォルダのindex.htmlにchakra UIのコンポーネントを表示したいです。
公式サイトに記載してある、
```js
import { ChakraProvider } from '@chakra-ui/react';
```
を入れると画面が真っ白になります


### 該当のソースコード

**public/index.html**
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

```

**src/index.js**
```js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

```
**src/App.js**
```js
import logo from './logo.svg';
import './App.css';

import * as React from 'react';
import ReactDOM from 'react-dom';
// ↓ここを追加しました
import { ChakraProvider } from '@chakra-ui/react';


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.?
        </p>
　　　// ↓ここを追加しました
        <ChakraProvider>
           <TheRestOfYourApplication />
        </ChakraProvider>
　　　// ↑ここまで
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

```


### 試したこと

index.jsに
```js
import { ChakraProvider } from '@chakra-ui/react';
```
を入れてみたが変わらずです。
App.jsに書いてある
```js
 import { ChakraProvider } from '@chakra-ui/react';
```
を
```js
import * as React from '@chakra-ui/react';
 ```
に変更しました。が、真っ白になりました。

App.jsを、chakra UIの公式にあったソースコード
```js
import * as React from 'react'

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}
```
に丸々変えました。が、だめでした。

### 補足情報（FW/ツールのバージョンなど）
色々と試してみましたが全然だめでした。

当方初心者で、難しいことがわかりません。
書き方が違う、どこか見逃しているなど、教えてくださると幸いです！
できるだけわかりやすい言葉で教えてくださると助かります！
どなたかよろしくお願いします。


chakra UIの使用方法がわからない！

### 実現したいこと
エラーを理解し、テストの第一歩としてレンダリングを成功させたい。


### 前提

React学習のためのアプリの制作が終わり、勉強を兼ねてテスト作成に取り組んでいます。
簡単なコンポーネントに対してのテストは書けたものの、少し複雑なPropsを渡す必要のあるコンポーネントに対してテストを行おうとしたところ、エラーが発生。

テスト時は私の認識不足でいつもエラーが発生はするのですが、調べたり試行錯誤することで解消出来ていたのですが、今回、解消が出来なかったため質問させていただきました。

おそらくですが、ReactHookFromのRegisterをmock化する方法が間違えているのだと思うのですが何をテストに対しても知識が浅いため、どのようにmock化すればエラーが解消できるのかがわかりませんでした。

### 発生している問題・エラーメッセージ
以下、テストの結果を貼り付けます。
```
 FAIL  src/__Test__/molecules/OkaimonoDetail.test.tsx
  OkaimonoDetail
    ✕ テスト中 (91 ms)

  ● OkaimonoDetail › テスト中

    TypeError: Cannot destructure property 'ref' of 'register(...)' as it is undefined.

      90 |       {fields.map((field, index) => {
      91 |         const {
    > 92 |           ref,
         |           ^
      93 |           onChange: registerOnChange,
      94 |           ...rest
      95 |         } = register(`listForm.${index}.purchaseName`, {
```


### 該当のソースコード
```
■コンポーネントのコード
import { SmallAddIcon } from "@chakra-ui/icons";
import {
  Box,
  ComponentWithAs,
  Divider,
  FormLabel,
  Heading,
  HStack,
  Icon,
  IconProps,
  Input,
  InputGroup,
  InputRightElement,
  Text,
  VStack,
} from "@chakra-ui/react";
import { ListFormParams, MergeParams } from "interfaces";
import React, { Dispatch, memo, SetStateAction, VFC } from "react";
import {
  FieldArrayWithId,
  FieldErrors,
  FieldValues,
  UseFieldArrayRemove,
  UseFormGetValues,
  UseFormRegister,
  UseFormSetValue,
  UseFormWatch,
} from "react-hook-form";

type Props = {
  fields: FieldArrayWithId<MergeParams, "listForm", "key">[];
  // eslint-disable-next-line no-unused-vars
  insertInputForm: (index: number) => void;
  SmallCloseIcon: ComponentWithAs<"svg", IconProps>;
  remove: UseFieldArrayRemove;
  register: UseFormRegister<MergeParams>;
  errors: FieldErrors<MergeParams>;
  validationNumber: RegExp;
  readOnly?: boolean;
  getValues?: UseFormGetValues<MergeParams>;
  deleteIds?: string[];
  setDeleteIds?: Dispatch<SetStateAction<string[]>>;
  watch: UseFormWatch<FieldValues>;
  expiryDate?: boolean;
  // eslint-disable-next-line no-unused-vars
  onListChange?: (event: React.ChangeEvent<HTMLInputElement>, index: number, newValue: string) => void;
  purchaseNameSuggestions?: ListFormParams[];
  setValue?: UseFormSetValue<MergeParams>;
  setPurchaseNameSuggestions?: React.Dispatch<React.SetStateAction<ListFormParams[]>>;
  purchaseNameIndex?: number;
};

export const OkaimonoDetail: VFC<Props> = memo((props) => {
  const {
    fields,
    insertInputForm,
    SmallCloseIcon,
    remove,
    register,
    errors,
    validationNumber,
    readOnly = false,
    getValues,
    setDeleteIds,
    watch,
    expiryDate,
    onListChange,
    purchaseNameSuggestions,
    setValue,
    setPurchaseNameSuggestions,
    purchaseNameIndex,
  } = props;

  const onClickSuggests = (
    event: React.MouseEvent<HTMLParagraphElement, MouseEvent>,
    purchaseName: string,
    index: number
  ) => {
    event.preventDefault();
    if (setValue && setPurchaseNameSuggestions && purchaseName) {
      setValue(`listForm.${index}.purchaseName`, purchaseName);
      setPurchaseNameSuggestions([]);
    }
  };
  return (
    <Box>
      <Heading as="h3" size="sm" textAlign="center" pt={1} pb={3}>
        お買い物リスト
      </Heading>
      {fields.map((field, index) => {
        const {
          ref,
          onChange: registerOnChange,
          ...rest
        } = register(`listForm.${index}.purchaseName`, {
          required: { value: true, message: "商品名が入力されていません" },
          maxLength: { value: 35, message: "最大文字数は35文字までです。" },
        });

        const customOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
          // 親コンポーネントから渡された onChange ハンドラを実行
          if (onListChange) {
            onListChange(event, index, event.target.value);
          }

          // 入力が空の場合、候補リストをクリアする
          if (setPurchaseNameSuggestions && event.target.value === "") {
            setPurchaseNameSuggestions([]);
          }

          // React Hook Form の onChange ハンドラを実行
          if (registerOnChange) {
            registerOnChange(event);
          }
        };

        const startDate = watch(`listForm.${index}.expiryDateStart`);
        return (
          <HStack key={field.key} px={2} py={3} w="100%" bg="white" rounded="xl" mb="2">
            <VStack spacing={1} w="5%">
              <Box display={fields.length < 20 || readOnly ? "block" : "none"}>
                <SmallAddIcon
                  bg="teal.500"
                  rounded="full"
                  color="white"
                  onClick={(event) => {
                    if (readOnly) {
                      event.preventDefault();
                      // eslint-disable-next-line no-alert
                      alert("確認画面では使用できません。");
                      return;
                    }
                    insertInputForm(index);
                  }}
                />
              </Box>

```
■ユニットテストのコード
```ここに言語名を入力
import { SmallCloseIcon } from "@chakra-ui/icons";
import { render, RenderResult } from "@testing-library/react";
import { OkaimonoDetail } from "components/molecules/OkaimonoDetail";

describe("OkaimonoDetail", () => {
  const getValuesMock = jest.fn().mockReturnValue(99); //getValuesを再現するために記述。


  const testPurchaseObjs = [
    {
      userId: "test1",
      shopId: "shopId",
      id: "1",
      asc: "0",
      purchaseName: "testPurchase1",
      price: "999",
      shoppingDetailMemo: "testMemo",
      amount: "amount",
      shoppingDate: "2023-07-27",
      expiryDateStart: "2023-07-28",
      expiryDateEnd: "2023-07-29",
      listId: "99",
      isBought: true,
      isFinish: true,
      differentDay: 1,
      isDelete: false,
      memosCount: 3,
      totalBudget: 9999,
    },
    {
      userId: "test2",
      shopId: "shopId",
      id: "2",
      asc: "1",
      purchaseName: "testPurchase2",
      price: "999",
      shoppingDetailMemo: "testMemo",
      amount: "amount",
      shoppingDate: "2023-07-27",
      expiryDateStart: "2023-07-28",
      expiryDateEnd: "2023-07-29",
      listId: "99",
      isBought: true,
      isFinish: true,
      differentDay: 1,
      isDelete: false,
      memosCount: 3,
      totalBudget: 9999,
    },
  ];

  const FieldMocks = [
    {
      amount: "",
      asc: "",
      expiryDateEnd: "",
      expiryDateStart: "",
      id: "",
      key: "43ea4b2c-54a6-465b-9ae8-25e68eb94dc9",
      price: "",
      purchaseName: "",
      shoppingDetailMemo: ""
    }
  ];

  const mockFunctions = {
    fields: FieldMocks,
    insertInputForm: jest.fn(),
    SmallCloseIcon,
    remove: jest.fn(),
    register: jest.fn().mockReturnValue({
      ref: jest.fn(),
      onChange: jest.fn(),
      name: 'listForm',
    }),
    errors: {},
    validationNumber: /^[0-9]+$/,
    readOnly: false,
    getValues: getValuesMock,
    setDeleteIds: jest.fn(),
    watch: jest.fn(),
    expiryDate: false,
    onListChange: jest.fn(),
    purchaseNameSuggestions: testPurchaseObjs,
    setValue: jest.fn(),
    setPurchaseNameSuggestions: jest.fn(),
    purchaseNameIndex: 0,
  };

  let utils: RenderResult;

  beforeEach(() => {
    utils = render(<OkaimonoDetail {...mockFunctions} />);
  });

  test("テスト中", () => {
    console.log(mockFunctions.register.mock.calls);
  });

});

```

### 試したこと

上記のテストコードの通り、console.logを記載し、エラーの特定を行いました。
しかし、以下のような結果が返されてしまいます。
>   console.error
    The above error occurred in one of your React components:
    
        at /Users/apple/Github/myportfolio03/frontend/src/components/molecules/OkaimonoDetail.tsx:55:5
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

55行目はコンポーネントのconst内の一番上のfieldsに該当するため、テストコード内のFieldMocksを見直してみたのですが、誤りらしい部分を見つけられませんでした。

どうか、エラーの原因特定にお力をお貸しいただけないでしょうか。

### 補足情報（FW/ツールのバージョンなど）

"react-hook-form": "^7.43.9",
"react": "^17.0.2",
"@chakra-ui/react": "^1.0.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",~~打ち消し線~~


React Native