react-transtion-group (версия 4.4.1) CSSTransition заменить скользящей

Question

Я пытаюсь перемещаться между содержимым (размонтирование после его удаления), нажимая кнопку. Вот простой пример того, что я надеюсь достичь sh.

function App() {
  const [isVisible, setIsVisible] = React.useState(true);
  const timeout = 4000;

  return (
    <div className="container">
      <CSSTransition in={isVisible} timeout={timeout} className="left" mountOnEnter unmountOnExit>
        <button onClick={() => setIsVisible(x => !x)}>Slide to the Left</button>
      </CSSTransition>
      <CSSTransition in={!isVisible} timeout={timeout} className="right" mountOnEnter unmountOnExit>
        <button onClick={() => setIsVisible(x => !x)}>Slide to the Right</button>
      </CSSTransition>
    </div>
  );
}

, а вот CSS:

.container {
  position: relative;
}

.left, .right {
  position: absolute;
  transition: all 4s;
}

.left {
  left: 0px;
}

.left.enter-active,
.left.enter-done {
  left: 0px;
}

.left.exit-active,
.left.exit-done {
  left: -150px;
}

.right {
  left: 150px;
}

.right.enter-active,
.right.enter-done {
  left: 0px;
}

Я играл с этим вечно и чувствую себя так близко, CSS, я думаю, просто надрывает мне задницу. Вот демонстрация: https://react-yck22m.stackblitz.io/

Он отлично работает для скольжения влево, но когда я пытаюсь сдвинуть назад вправо, левая кнопка не работает. Я знаю, что это связано с left: 0px, но я не знаю, как это решить.

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