Soy nuevo en React (v18.1) y MUI (v5.8.4) y estoy tratando de crear un modal de búsqueda. Tengo un diseño simple que hice con flexboxes usando el elemento Box de MUI. Se compone de una barra de búsqueda en la parte superior, una sección de filtros plegable, un cuadro de contenido principal para mostrar los resultados de la búsqueda y un pie de página. Hay un problema con la sección Contraer: cuando el contenido de la sección principal comienza a desbordarse, el tamaño de la sección contraíble comienza a reducirse. Cuanto más se desborde, menor será la sección de colapso.

Con pocos elementos (comportamiento esperado) vs Con muchos elementos (comportamiento inesperado)
Perdón por los enlaces feos, no tengo suficiente reputación para incrustar las imágenes.

Hice un ejemplo simple de CodeSandbox donde puedes jugar con itemCount y desencadenar el colapso con el botón de alternancia para reproducir el problema.

Lo que he probado:

• Probé muchas reglas de CSS para superar este problema y ninguna funcionó. Además, no soy un profesional de CSS.
• Intenté reemplazar el contenido de la sección principal, que es una Lista, por varias cosas, como span div o texto sin formato, y nada funcionó.

Cualquier ayuda o consejo para mejorar el diseño general y solucionar el problema son bienvenidos.