React(Remotion)を使用して開発をしていたら無限ループ？に陥ってしまいました。

実現したいこと

前提

Reactを用いて動画作成ができるRemotionと呼ばれるツールを用いて開発をしていた際、
人工音声(VOICEVOX)の読み上げ音声を取得しようとしたところ以下のエラーが発生しました。

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

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 翻訳 警告: 最大更新深度を超えました。 これは、コンポーネントが useEffect 内で setState を呼び出したときに発生する可能性がありますが、useEffect に依存配列がないか、依存関係の 1 つがレンダリングごとに変更されます。

該当のソースコード

typescript

1const rpc = axios.create({ baseURL: "http://localhost:50021", proxy: false });2 3export const Voice: React.FC<Props> = ({ text }: Props) => {4 const [audioData, setAudioData] = useState<Blob>();5 const [handle] = useState(() => delayRender());6 7 const fetchData = useCallback(async () => {8 const audio_query = await rpc.post('audio_query?text=' + encodeURI(text) + '&speaker=1');9 10 const synthesis = await rpc.post("synthesis?speaker=1", JSON.stringify(audio_query.data), {11 responseType: 'blob',12 headers: {13 "accept": "audio/wav",14 "Content-Type": "application/json"15 }16 });17 18 setAudioData(synthesis.data); // この文を無くすとエラーが消えます19 20 continueRender(handle);21 }, [handle]);22 23 useEffect(() => {24 fetchData();25 }, []);26 27 return (28 <div>29 {audioData ? (30 <Audio src={audioData ? window.URL.createObjectURL(audioData) : undefined} />31 ) : null}32 </div>33 );34};

試したこと

自分なりに色々と調べてはみたのですが、余りこれといった情報を見つけることができず、
皆様のお力をお借りできればと思い投稿させていただきました。
React、Remotionともに使用経験がほぼないため、初歩的な部分かもしれませんが、どうぞよろしくお願いいたします。