How to animate a component in React?

Question

React

How to animate a component in React?
I draw them like this:

<Switch>
                    {
                        routesArray.map((item: any, index: number) => (
                            <Route
                                exact={item.exact}
                                component={item.component}
                                path={item.path}
                                key={index}
                            />
                        ))
                    }
</Switch>

We need to use slideInRight when we go forward, slideInLeft when we click on the back arrow and fadeIn when we click on the elements of the
navbar

GitHub navbar elements Application
itself: https://nikitabudkovskiy.github.io/hookah-mixer/

I've seen examples, but most of the examples use only one animation, but it doesn't suit me.