ページネーション機能で無限ループが起きた

前提

ページネーション機能の実装で、
一覧ページ(親コンポーネント)ー＞ページネーションページ(子コンポーネント)
間のデータのやり取りで無限ループが発生した時の解決策が不明なので質問させていただきます。
無限ループの発生場所はわかっているのですが、具体的な解決策の記述方法が不明です。
ご教授お願いいたします。

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

一覧ページ

~省略~
 //全ページ数
    const [ allPages, setAllPages] = useState()
    //現在のページ
    const [ currentPage, setCurrentPage] = useState()

useEffect((nextPageNumber) => {
        //ローディング開始
        setIsLoading(true);

        //alert(nextPageNumber);
        async function fetchData() {
            try {
                //正常にデータ取得された時の処理
                const response = await axios.get(Urlを記述');
                let posts_arr;
                //stringをjsonに変更
                posts_arr = JSON.parse(response.data);
                //現在のページを格納
                setCurrentPage(posts_arr.current_page);
                //全ページを格納
                setAllPages(posts_arr.last_page);
                //一覧データに格納
                setPosts(posts_arr.data);
               ~省略~
　　　return (
                           ~省略~
                           <Pagination
                                //全ページ数
                                allPages={allPages}
                                //現在のページ
                                setCurrentPage={setCurrentPage}
                                //ローディング
                                setIsLoading={setIsLoading}
                               
                            />
                           ~省略~
                            )

ページネーションページ


const Pagination = ({ allPages, currentPage, setIsLoading,setCurrentPage}) => {
                      
                      //ページの表示形式
                      const [tempNumberOfPages, settempNumberOfPages] = useState([])

                      const numberOfPages = []
                      for (let i = 1; i <= allPages; i++) {
                             numberOfPages.push(i)
                     }

                     let tempNumberOfPages = [...arrOfCurrButtons]
//全ページが5ページ以下の場合の処理(その他にも計算パターンがありますが今回はこの計算だけ記述いたします
                     if (numberOfPages.length < 6) {
                         tempNumberOfPages = numberOfPages
                     }
//ここで無限ループ発生(for文で作成した配列をuseStateに格納したいがどのように記述すればよい？
                     settempNumberOfPages(tempNumberOfPages);

    　　　　　　)
　　　　　　　return (
                       <li >
                    <a
                        onClick={() => currentPage(prev => prev <= 1 ? prev : prev - 1)}
                    >
                        前へ
                    </a>
                </li>
                <li className={"prev"}>
                    {tempNumberOfPages.map(((item, index) => {
                        return <a
                            className={`${currentPage === item ? 'btn btn-primary' : 'btn'}`}
                            onClick={() => settempNumberOfPages(item)}
                        >
                            {item}
                        </a>
                    }))}
                </li>
                <li>
                    <a
                       onClick={() => {
                           const nextPageNumber = +currentPage + 1;
                           settempNumberOfPages(nextPageNumber);
                       }}
                       //onClick={() => settempNumberOfPages(prev => prev >= allPages ? prev : prev + 1)}
                    >
                        次へ
                    </a>
                </li>
                    )
}
export default MCPaginationFormal;