Реагировать на ширину <CSSTransition> таким же уникальным компонентом <Route>

Question

Я разработал свое портфолио с новым инструментом для меня: React. Я пытаюсь сделать переход входа и выхода из страницы projectDetails

Итак, у меня есть список моего проекта, и когда я нажимаю, я хочу, например, постепенное появление, а когда я выбираю проект, я хочу постепенное исчезновение.

Я нашел библиотеку react-transition-group, я использую это как для App.js

        <Router>
            <Route render={(location) => (
                <div className="App" onMouseMove={e => this.cursorDeplacement(e)}>
                    <Header/>
                    <Projects projectsList={projectsList} />
                    <CSSTransition
                        classNames={'exemple'}
                        timeout={1000}>
                        <Route path={`/work/:id/:workName`} component={ProjectDetails}/>
                    </CSSTransition>
                </div>
            )}
            />
        </Router>

И мой CSS для анимации

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

Но это не сработало, когда я нажимаю на страницу, переход вообще не происходит, вы, ребята, можете мне помочь, пожалуйста, я застрял?