React-Transition-Group to show and hide the menu with a sliding effect

Question

In my React app I use CSSTransition from the react-transition-group library to create a menu with a smooth transition (it should appear from the left to the right). But the transition doesn't work. Cannot figure out why. Please help me to solve the issue.

This is a link to the repository:

REACT:

import { useEffect } from 'react';
import Backdrop from '../Backdrop/Backdrop';
import Navigation from '../Navigation/Navigation';
import IconToggleOn from '../NavigationIcons/IconToggleOn';
import { ContentContainer } from './Menu.styled';
import { removeBodyscroll } from '../../../utils/removeBodyScroll';
import { CSSTransition } from 'react-transition-group';
import { useRef } from 'react';

const Menu = ({ menuOpen, setMenuOpen }) => {
  useEffect(() => {
    removeBodyscroll(menuOpen);
  }, [menuOpen]);

  const nodeRef = useRef(null);

  useEffect(() => {
    const handleKeyDown = e => {
      if (e.code === 'Escape') {

        setMenuOpen(false);
      }
    };
    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [setMenuOpen]);

  const handleBackdropClick = e => {
    if (e.currentTarget === e.target) {
      setMenuOpen(false);
    }
  };

  const handleLinkClick = () => {
    setMenuOpen(false);
  };

  return (
    <Backdrop handleBackdropClick={handleBackdropClick}>
      <CSSTransition
        nodeRef={nodeRef}
        in={menuOpen}
        timeout={300}
        classNames="menu"
        unmountOnExit
      >
        <ContentContainer className="menus" menuOpen={menuOpen} ref={nodeRef}>
          <Navigation status="menu" handleLinkClick={handleLinkClick} />
          <IconToggleOn />
        </ContentContainer>
      </CSSTransition>
    </Backdrop>
  );
};

export default Menu;

CSS:

.menu-enter {
  transform: translateX(-100%);
}

.menu-enter-active {
  transform: translateX(0);

  transition: transform 300ms ease-out;
}
.menu-exit {
  transform: translateX(0);
}

.menu-exit-active {
  transform: translateX(-100%);
  transition: transform 300ms ease-out;
}

Cannot figure out the cause of the issue. Please help me to solve it.