react-transition-group not working with React Router

Question

I have a problem with React transitions group. For some reason, the fade in and out is not working on Router Switch. I have read the documentation and implemented it inside my App.

Don't know what is wrong with my code.

My React code:

const App = () => (
    <Router>
        <Menu />
        <TransitionGroup>
            <CSSTransition
                timeout={{ enter: 300, exit: 300 }}
                classNames={'fade'}>
                <Switch>
                    {routes.map(route => (
                        <Route
                            exact
                            key={route.path}
                            path={route.path}
                            component={route.component}
                        />
                    ))}
                </Switch>
            </CSSTransition>
        </TransitionGroup>
    </Router>
);

export default App;

Css code:

.fade-enter {
    opacity: 0.01;
    &.fade-enter-active {
        opacity: 1;
        transition: opacity 300ms ease-in;
    }
}

.fade-exit {
    opacity: 1;
    &-active {
        opacity: 0.01;
        transition: opacity 300ms ease-in;
    }
}

Answer 1

Nevermind, forgot to wrap it:

<Route render={({ location }) => (

Thanks.