Переход CSS из React Transition Group не работает, и я не могу понять, почему

У меня есть приложение, в котором я пытаюсь вывести меню с левой стороны. Я могу заставить его просто появляться при нажатии кнопки меню. Однако я использую CSSTransition из React Transition Group для создания эффекта слайда, но это не сработает. Когда я нажимаю кнопку меню, меню появляется немедленно (без задержки), но когда я снова нажимаю кнопку меню, меню исчезает после тайм-аута (задержка 500 мс). Однако нет перехода ни для открытия, ни для закрытия меню. Я не уверен, почему задержка происходит только при закрытии меню. Я попытался посмотреть, что произойдет, если я избавлюсь от «unmountOnExit» в CSSTransition, но это просто заставило меню постоянно появляться без каких-либо изменений после нажатия кнопки.

Вот как выглядит мой код:

import './App.css';

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

function App() {

   const [open, setOpen] = useState(false);

   function toggleOpen() {
        setOpen(!open);
    }

      return (
          <NavBar toggleOpen = {toggleOpen} open = {open}></NavBar>
      )
}

function NavBar(props) {

  function DropdownMenu() {
    return (
      <div className = "DropdownMenu">
      </div>  
    )
  }

    return (
      <div className = "NavBar">
        <div className = "Menu-button" onClick = {props.toggleOpen}>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <CSSTransition
          in = {props.open}
          timeout = {500}
          className = "Menu-open"
          unmountOnExit>
          <DropdownMenu/>
        </CSSTransition>
      </div>
    )  
}            

export default App;

Код CSS следующий:

.NavBar {
  position: fixed;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: gray;
  border-bottom: solid black 1px;
}

.Menu-button {
  background-color: transparent;
  padding-top: 0.5rem;
  cursor: pointer;
  margin: 20px;
  padding: 0;
}

.Menu-button div {
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.DropdownMenu {
  position: fixed;
  top: 58px;
  right: 5px;
  width: 34%;
  height: 500px;
  border-radius: 5px;
  background-color: lightgray;
}

.menu-open-enter {
  position: absolute;
  transform: translateX(-110%);
}
.menu-open-enter-active {
  transform: translateX(0%);
  transition: all 500ms ease;
}
.menu-open-exit {
  position: absolute;
}
.menu-open-exit-active {
  transform: translateX(-110%);
  transition: all 500ms ease;
}