Codesandbox: https://codesandbox.io/s/gallant-cori-hdj5w?file=/src/App.js
I have this simple component with two animations: the first one on the height (from 0% to 100%) and the second one on the max-height. I didn't understand why they works but not at the same time: the second animation seems like waits the first animation to finish before to start.
The expected behaviour is that both the animation start and end together.
What is the problem?
I would build the styling again due to positioning problems, but if you want a fast patch for this issue change maxHeight: isHeightFull ? 0 : 500 on line 103 for maxHeight: isHeightFull ? 0 : 50
To improve the styling try adding borders to your two most important containers and then figure out how to build it in such a way that they don't superimpose.