In React, how do I make an element expand when it is displayed?

Please take a look at this sandbox:

https://playcode.io/1852293

Desired effect:

1. After clicking the button, the yellow box show up by expanding from left to right. It looks like a animation where its width grows from 0 to 100px.

2. The inner blue box doesn’t get rendered until its parent yellow box is fully expanded (width = 100px).

I know that I can make the element always mounted, set its initial width to 0, and use transition to achieve this effect, but it causes some other issues, so I wonder if I can do it via conditional rendering.

Thanks in advance!