Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.

When calling the function to map firebase information I get the error that the maximum update depth was exceeded, this happens when in App.js in a ternary conditional I use useNavigate, to wrap the component in Route, if I leave it with no Route yes normal load

 const [proyectos, setProyectos]= React.useState([]); async function actualizarEstadoProyectos(){ const p = await GetAllProyects(); setProyectos([...p]) } actualizarEstadoProyectos();

Here in the previous function I get the information from the database in firebase through GetAllProyects and then map it as shown below:

 <> <ul> {proyectos ? proyectos.map((proyecto)=> <li key={proyecto.id}> {<ItemCardVisitantes proyecto={proyecto} />} </li> ) : null} </ul> </>

I get the error when in App I use a ternary conditional with useNavigate:

 let navigate = useNavigate(); usuarioGlobal ? usuarioGlobal.rol === "Funcionario" ? <Navbar /> : navigate("/lect") : <Logueo />}

As it shows me in the previous code, it generates the error.

 let navigate = useNavigate(); usuarioGlobal ? usuarioGlobal.rol === "Funcionario" ? <Navbar /> : <Visitantes /> : <Logueo />}

So it does not generate any error and the page with the projects is loaded correctly, then I leave the code of the GetAllProyects function

 try { const proyectos =[]; const collectionRef = collection(db, "proyectos"); const snaps = await getDocs(collectionRef); // ciclo asíncrono para obtener los precios junto a la descripccion del proyecto for await (const snap of snaps.docs){ const proyecto = snap.data(); proyecto.id = snap.id; const benefiSnaps = await getDocs(collection(snap.ref, "beneficiarios")); proyecto.beneficiario = benefiSnaps.docs[0].data(); proyectos.push(proyecto); } return proyectos; } catch (error){ console.error(error); }