Cuando colapso un TreeItem, quiero que todos sus TreeItems descendientes (sus hijos, sus hijos, etc.) estén abiertos para contraerse también. En el estado existente, desaparecen, pero la próxima vez que expando el TreeItem principal, también se expanden.
El TreeView está "no controlado" de manera predeterminada, lo que significa que el componente manejará el estado por usted, y usted, como consumidor, obtendrá el comportamiento predeterminado que establezca la MUI. Para lograr lo que desea, deberá convertir TreeView en un componente "controlado". Hay un ejemplo del uso del componente controlado aquí: https://mui.com/components/tree-view/#control-tree-view
El ejemplo en la página de MUI está haciendo más que solo manejar la expansión/colapso de los nodos. En la forma más simple, debe manejar explícitamente el accesorio "expandido" que se pasa al TreeView usted mismo.
const Tree = () => { // nodes "1", "1.1", "2" will start expanded const [expanded,setExpanded] = useState(["1","1.2","2"]); const createHandler = (id) => () => { // if node was collapsed, add to expanded list if(!expanded.includes(id)) { setExpanded([...expanded,id]); } else { // remove clicked node, and children of clicked node from expanded list setExpanded(expanded.filter(i => i !== id && !i.startsWith(`${id}.`)); } }; return ( <TreeView expanded={expanded}> <TreeItem nodeId="1" label="A" onClick={createHandler("1")}> <TreeItem nodeId="1.1" label="B" /> <TreeItem nodeId="1.2" label="C" onClick={createHandler("1.2")}> <TreeItem nodeId="1.2.1" label="D" /> </TreeItem> </TreeItem> <TreeItem nodeId="2" label="E" onClick={createHandler("2")}> <TreeItem nodeId="2.1" label="F" /> </TreeItem> </TreeView> ); }Nota: hay algunos errores en el ejemplo anterior, no puedo ejecutarlo en este momento para verificar que sea correcto.