React CSSTransition не работает с моими компонентами

Question

Я совершенно сбит с толку, почему это модальное окно не переходит. Я отлично следил за документами для React Transition Group, и он не будет работать вообще. Есть идеи?

// Компонент

    import React from "react";
import { Modal, Movie } from "./index";
import { CSSTransition } from "react-transition-group";
import "./transition.css";

export function MovieList({ list, actorBirthday, showList, toggleModal }) {

  return (
    <>
      <CSSTransition in={showList} timeout={300} className="transition">
        <Modal isOpen={showList} toggleModal={toggleModal} ariaHideApp={false}>
          {list.map((movie) => {
            return (
              <Movie
                key={movie.id}
                title={movie.title}
                poster_path={movie.poster_path}
                release_date={movie.release_date}
                actorBirthday={actorBirthday}
                // Info={asd}
              />
            );
          })}
        </Modal>
      </CSSTransition>
    </>
  );
}

// CSS

.transition-enter {
  opacity: 0.01;
  transform: scale(0.5);
}
.transition-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: all 300ms ease-in;
}
.transition-exit {
  opacity: 1;
  transform: scale(1);
}
.transition-exit-active {
  opacity: 0.01;
  transform: scale(0.5);
  transition: all 300ms ease-in;
}

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