Tengo ciertas rutas definidas en routes.tsx .
Estoy usando esto para llenar dinámicamente una barra lateral (cajón de interfaz de usuario de material).
Las rutas tienen la siguiente estructura:

 const AppRoutes = { group_a: { title: "", icon: <material icon JSX>, path: "", children: { ...same structure as a group, but without further children } } }

Después de obtener las rutas, creé un objeto de estado para realizar un seguimiento de la expansión/contracción de los grupos.

 let menuGroups = Object.keys(AppRoutes); const [groupOpen, setGroupOpen] = React.useState(() => { const state = {}; for (let group of menuGroups) (state as any)[group] = true; return state; }); const handleGroupToggle = (group: string) => { setGroupOpen(state => (state as any)[group] = !(state as any)[group]); // something wrong here? idk };

Pero esto no está funcionando como se esperaba.
Inicialmente los grupos están abiertos como se esperaba. Pero al hacer clic en cualquier grupo, todos los grupos colapsan juntos. Y luego otro intento de volver a abrirlos da como resultado un error. Uncaught TypeError: Cannot create property 'group_a' on boolean 'false'
En una investigación más profunda, descubrí que el objeto de estado se ha convertido de alguna manera en un false booleano.

Aquí hay un codesandbox para replicar esto:https://codesandbox.io/s/flamboyant-rgb-oin62u?file=/src/App.js