Tengo un objeto que estoy llenando con cierta información, cuando registro el objeto se muestra vacío pero cuando lo abro en Chrome, muestra que se llenaron los detalles correctos.

Así es como se ven los registros

cerrado: obj cerrado

abierto: obj abierto

Al mapear el objeto, aparece el siguiente error Cannot read properties of undefined (reading 'map')

¿Estoy haciendo algo mal?

aquí está mi código:

 function Admin() { const [loading, setLoading] = useState<boolean>(false); const [webAppTypes, setWebAppTypes] = useState<IWebAppType[]>([]); var nm: { [key: number]: Array<IWebApp> } = {}; useEffect(() => { setLoading(true); fetch(`${process.env.REACT_APP_API_URL}/webapptype/read_all`, { headers: headers, }) .then((data) => { setLoading(false); return data.json(); }) .then((res) => { setWebAppTypes(res); }); }, []); useEffect(() => { webAppTypes.map((a) => { fetch(`${process.env.REACT_APP_API_URL}/webapp/read_all/${a.id}`, { headers: headers, }) .then((data) => { return data.json(); }) .then((data) => { let arr: Array<IWebApp> = []; data.map((a: any) => { const model: IWebApp = { id: a.id, name: a.name, description: a.description, link: a.link, image: a.image, }; arr.push(model); }); nm[a.id] = arr; }); }); console.log(nm); }, [webAppTypes]); if (loading) return <h6>Loading...</h6>; return ( <div style={{ padding: 100, paddingLeft: 200, width: 500 }}> {webAppTypes.map((a) => { return ( <Accordion key={a.id}> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header" > <Typography>{a.name}</Typography> </AccordionSummary> <AccordionDetails> <> {nm[a.id].map((t) => { return <Typography>{t.id}</Typography>; })} </> </AccordionDetails> </Accordion> ); })} </div> ); }

Cualquier ayuda sería apreciada.