Tengo un enlace para guardar el estado en el almacenamiento local:

 const [expandingState, setExpandingState] = useLocalStorageState<Record<string, boolean>>( 'expandingState', {}, );

y después de que el usuario hace clic en el elemento expandir/contraer, manipulo el valor del estado usando setExpandingState de esta manera:

 const handleExpandCollapse = (row: UseTableRowProps<TableTreeProps>): void => { setExpandingState(prevState => { if (!prevState[row.id]) { return { ...prevState, [row.id]: true, }; } else { const newState = { ...prevState }; delete newState[row.id]; return newState; } }); };

Más información sobre la API particular de la tabla de reacción: https://react-table.tanstack.com/docs/api/useExpanded

Uso row.id para vincular el campo en el que se hizo clic y expandir los valores de State, pero con este enfoque, si agregamos o eliminamos un elemento más de la tabla, el row.id de cada fila de la tabla se desplaza y tenemos valores incorrectos en el Estado y, como resultado, no muestra correctamente los elementos de la tabla expandidos y contraídos...