Animate height and max-height on different elements cause a queue of transitions

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?