estoy recibiendo un error no detectado. demasiadas re-renderizaciones.

¿Qué estoy tratando de hacer?

cuando se hace clic en un botón, se llama a la función de inicio y se abre una ventana emergente modal. una vez que finaliza la función de inicio, tengo que cerrar la ventana emergente modal.

a continuación se muestra el código,

 enum CheckStatus { INITIAL, STARTING, STARTED, FINISHED, FAILED, } const useSomeHook = (id) => { const [status, setStatus] = React.useState(CheckStatus.INITIAL); const start = React.useCallback(async () => { setStatus(CheckStatus.STARTING); let data= undefined; try { const { data: checkData } = await startCheck({ variables: { id }, }); data = checkData; } //some logic React.useEffect(() => { if (status === CheckStatus.STARTED ) { stopPolling && stopPolling(); setStatus(Check Status.FINISHED); //once status is finished then i have to close modal popup } } return { start, status, }; }; const Main = () => { const [openModal,setOpenModal] = React.useState(false); const {start,status} = useSomeHook(id); return ( {openModal && (<Modal />)} ); }

Ahora quiero establecer el estado openModal en falso cuando finalice el estado. así que me gusta a continuación,

 const Main = () => { const [openModal,setOpenModal] = React.useState(false); const {start,status} = useSomeHook(id); if (status === CheckStatus.FINISHED) { setOpenModal(false); } //this gives error return ( {openModal && (<Modal />)} ); }

pero da este error

 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

¿Cómo puedo arreglar esto? ¿Es esta la solución correcta?

¿También hay alguna manera de configurar setOpenModal dentro de useSomeHook tan pronto como el estado se establezca en FINALIZADO?

alguien podría ayudarme a arreglar esto. Gracias.