Estoy trabajando en una interfaz de usuario para una aplicación web que puede tener varios proyectos abiertos en una sesión. El componente lógico en la barra de navegación izquierda es un acordeón, porque el usuario puede querer o no ver la lista de proyectos activos.

Cuando está colapsado, esto se ve bien:

Sin embargo, la expansión no mueve el divisor hacia abajo ni cambia el tamaño del div contenedor y se ve así:

Como puede ver, el contenido del acordeón se muestra debajo del divisor. Tampoco me gusta que cambie la posición de AccordionSummary cuando se expande, pero puedo lidiar con eso más adelante.

Tengo un codesandbox que contiene el marco de interfaz de usuario básico. Los archivos ProjectsTile.js y ProjectsTile.css contienen código para admitir Material UI Accordion y un intento que hice de codificar un Accordion desde cero. Ninguna de las soluciones funcionó para mover los otros contenidos de NavDrawer.js al expandir los acordeones. ¿Cómo puedo hacer que el contenido debajo de ProjectsTile en NavDrawer se mueva hacia abajo durante la expansión de Accordion y retroceda al contraerse?