Códigos y caja: https://codesandbox.io/s/gallant-cori-hdj5w?file=/src/App.js
Tengo este componente simple con dos animaciones: la primera en la altura (de 0% a 100%) y la segunda en la altura máxima. No entendí por qué funcionan pero no al mismo tiempo: la segunda animación parece esperar que la primera animación termine antes de comenzar.
El comportamiento esperado es que la animación comience y termine juntas.
¿Cuál es el problema?
Construiría el estilo nuevamente debido a problemas de posicionamiento, pero si desea un parche rápido para este problema, cambie maxHeight: isHeightFull ? 0 : 500 en la línea 103 para maxHeight: isHeightFull ? 0 : 50
Para mejorar el estilo, intente agregar bordes a sus dos contenedores más importantes y luego descubra cómo construirlo de tal manera que no se superpongan.