モーダルウィンドウのアニメーション付与

実現したいこと

モーダルウィンドウの実装において、ウィンドウを開くときと閉じるときにふわっとアニメーションを付与したい

前提

Reactのreact-transition-groupでモーダルウィンドウを実装してるのですが、cssが効かずに困っています。

該当のソースコード

tsx

1import Image from 'next/image';2import { FC, useRef } from 'react';3import { CSSTransition } from 'react-transition-group';4 5import Overlay from '@/components/elements/common/Overlay';6import { useModal } from '@/hooks/useModal';7import { modalData } from '@/lib/modal';8import styles from '@/styles/components/elements/common/Card.module.scss';9 10import Modal from './Modal';11 12type Props = {13 data: {14 id: string;15 path: string;16 alt: string;17 name: string;18 language: string;19 text: string;20 link: string;21 }[];22};23 24const Card: FC<Props> = (props) => {25 const { data } = props;26 const { show, setShow } = useModal();27 const nodeRef = useRef(null);28 29 return (30 <>31 <div className={styles.card}>32 <div className={styles.card__area}>33 {data.map((d) => (34 <div onClick={() => setShow((prev) => !prev)} key={d.id}>35 <Image className={styles.card__area__img} src={d.path} alt={d.alt} width={500} height={250} />36 <ul>37 <li className={styles.card__name}>{d.name}</li>38 <li className={styles.card__language}>{d.language}</li>39 <li>{d.text}</li>40 </ul>41 </div>42 ))}43 </div>44 </div>45 <CSSTransition in={show} timeout={200} unmountOnExit classNames={{ ...styles}} nodeRef={nodeRef}>46 {() => (47 <Overlay>48 <div ref={nodeRef} >49 {modalData.map((mD) => {50 return <Modal data={mD.data} />;51 })}52 </div>53 </Overlay>54 )}55 </CSSTransition>56 </>57 );58};59 60export default Card;61 62

module.scss

1.card { 2 display: flex; 3 align-items: center; 4 min-width: 200px; 5 max-width: 350px; 6 margin-bottom: 4rem; 7 overflow: hidden; 8 text-align: center; 9 background-color: white; 10 border-radius: 5rem; 11 box-shadow: 10px 10px 15px -10px; 12 13 :hover { 14 cursor: pointer; 15 } 16 17 &__area { 18 width: 100%; 19 20 &__img { 21 object-fit: cover; 22 width: 100%; 23 } 24 } 25 26 &__name { 27 font-size: 1.8rem; 28 font-weight: bold; 29 } 30 31 &__language { 32 font-size: 1.5rem; 33 color: rgb(234, 96, 96); 34 } 35 36 @include mq('md') { 37 min-width: 390px; 38 max-width: 500px; 39 40 &__img { 41 object-fit: cover; 42 width: auto; 43 } 44 } 45 46 .enter { 47 opacity: 0; 48 } 49 .enteractive { 50 transition: all 0.2s; 51 opacity: 1; 52 } 53 .exit { 54 opacity: 1; 55 } 56 .exitactive { 57 transition: all 0.2s; 58 opacity: 0; 59 } 60}

useModal.ts

1import { atom, useAtom } from 'jotai'; 2 3export const modalContext = atom(false); 4 5export const useModal = () => { 6 const [show, setShow] = useAtom(modalContext); 7 8 const openModal = () => { 9 setShow(true); 10 }; 11 12 const closeModal = () => { 13 setShow(false); 14 }; 15 16 return { openModal, closeModal, show, setShow }; 17};

試したこと

ネットの記事を確認して試せそうなことは一通り試したつもりなのですが、どうしても解決できません。
質問をするのは初めてですので拙い文章となっておるかと思いますが、ご回答の程よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。