Tengo un componente de página en Next.js que se parece a esto:

 export default function Index({ containers }) { const [containerListState, setContainerListState] = useState(containers); const updateContainerList = (container) => { containers.push(container); setContainerListState(containers); }; return ( <> <FormCreateContainer updateContainerList={updateContainerList} /> <ContainerList containers={containerListState} /> </> ); }

FormCreateContainer permite la creación de un contenedor. Cuando se resuelve esa llamada API, llamo a updateContainerList y paso el contenedor recién creado al padre. Esto funciona.

Sin embargo, también quiero pasar este contenedor a ContainerList (que es una lista dinámica simple que usa contenedores.map()) como parte de la propiedad de contenedores. Si bien la inserción en contenedores funciona según lo previsto, Next no actualiza en vivo mi lista de contenedores; el contenedor recién creado solo aparece cuando recargo la página.

Pensé que incluir useEffect y cambiar updateContainerList de la siguiente manera podría funcionar, pero lamentablemente no fue así.

 const updateContainerList = (container) => { containers.push(container); }; useEffect(() => { setContainerListState(containers); }, [containers]);

¿Cómo paso correctamente los datos de un componente secundario a un componente principal, pasándolos a un componente secundario diferente y actualizando una lista dinámica sin recargar la página yo mismo?

Realmente aprecio cualquier ayuda ya que he realizado una investigación exhaustiva que no me ayudó a lograr mi objetivo.