Коммутатор React-router с TransitionGroup 2.2.0 не применяет правильный переход (стили)

Question

У меня проблема, аналогичная той, о которой сообщалось здесь: https://github.com/ReactTraining/react-router/issues/5279

Я следую той же идее. Мне нужно смоделировать стиль навигации, как в мобильных устройствах (экраны / компоненты перемещаются справа налево при навигации вперед и перемещаются слева направо при движении назад). У меня нет проблем с навигацией справа налево. Но когда я меняю анимацию ("classNames" в CSSTransition) слева направо (после нажатия кнопки "Назад"), анимация не работает. Кажется, он применил его только к компоненту, который будет монтироваться... но монтированный компонент остается в том же стиле "справа налево", поэтому ожидаемая анимация не выглядит как мобильное приложение. Кто-нибудь знает почему?

Это суть кода:

render() {
const { location } = this.props;
return (
<div className="App">
            <TransitionGroup>
                <CSSTransition key={location.pathname.split('/')[1]} classNames={this.slideTo} timeout={1000} onEnter={this.handleEnter} onExit={this.handleExit} mountOnEnter={true} unmountOnExit={true} >
                    <Switch key={location.key} location={location}>
                        <Route location={location} path="/newVehicle" render={() => <NewVehicleView key={location.key}  next={this._next}/>} />
                        <Route location={location} path="/vehicleId" render={() => <VehicleIdView key={location.key} setVehicleId={this._setVehicleId} back={this._back} next={this._next} />} />
                        <Route location={location} render={() => <NewVehicleView key={location.key} next={this._next} />} />
                    </Switch>
                </CSSTransition>
            </TransitionGroup>
        </div>
    );
}

Стили:

.leftToRight-exit.leftToRight-exit-active {
  transform: translate(100%, 0, 0);
  transition: all 1000ms;
}
.leftToRight-exit {
  transform: translate3d(0, 0, 0);
}
.leftToRight-enter {
  transform: translate3d(-100%, 0, 0);
 }
.leftToRight-enter.leftToRight-enter-active {
  transform: translate3d(0, 0, 0);
  transition: all 1000ms;
}
.rightToLeft-enter {
  transform: translate3d(100%, 0, 0);
}
.rightToLeft-enter.rightToLeft-enter-active {
  transform: translate3d(0, 0, 0);
  transition: all 1000ms;
}
 .rightToLeft-exit {
  transform: translate3d(0, 0, 0);
}
.rightToLeft-exit.rightToLeft-exit-active {
  transform: translate3d(-100%, 0, 0);
  transition: all 1000ms;
}

Переменная {this.slideTo} устанавливается в значение 'rightToLeft' или 'leftToRight', когда в компонентах вызывается реквизит “next” или “back”. И тогда происходит навигация по кнопкам этого вида. Отладка приложения, я вижу, что "this.slideTo" имеет правильное значение, когда я нажимаю кнопку "Назад"… но когда я проверяю HTML-проверку, я могу понять, как только один из двух компонентов получает новый стиль, а другой - держит то же самое.

Любая помощь будет очень признателен. Благодарю.