ReactJS - How can I animate page transitions in the best possible way?

Hi!

I got a project where i need to have multiple page transitions animations.

I use :

<ReactTransitionGroup component="div" className="animationContainer" {...this.props}>
            {React.cloneElement(this.props.children || <div />, { key })}
</ReactTransitionGroup>

This is for my registration form, but i need another in a parent component. When i add it, it remove the transitions in my registration form.

How can i handle page transitions to animate only direct children?

Thank you!