Не работают анимации в React(React Transition Group)

Не работает анимация появления и удаления элемнта из списка

App.js:

import './App.css';
import {useMemo, useState} from "react";
import PostList from "./components/PostList";
import PostForm from "./components/PostForm";
import PostFilter from "./components/PostFilter";
import Modal from "./components/UI/Modal/Modal";
import Button from "./components/UI/Button/Button";

function App() {

    const [posts, setPosts] = useState([
        {id: 1, title: "JavaScript", body: "Programming language"}
    ]);


    const [modal , setModal] = useState(false);


    const [filter , setFilter] = useState({sort: "" , search: ""});


    const sortedPosts = useMemo(() => {
        console.log("getSortedPosts worked")
        if (filter.sort) {
            return [...posts].sort((a, b) => a[filter.sort].localeCompare(b[filter.sort]))
        }
        return posts
    }, [filter.sort, posts])



    const searchedAndSortedPosts = useMemo(() => {
        return sortedPosts.filter(post => post.title.toLowerCase().includes(filter.search.toLowerCase()))
    }, [sortedPosts, filter.search]);



    function deleteItem(id) {
        setPosts(posts.filter(post => post.id !== id))
    }



    function createItem(title, body) {
        const newItem = {
            title: title,
            body: body,
            id: Date.now(),
        }
        setPosts([...posts, newItem])
        setModal(false)
    }



    return (
        <div className="App">
            <Button
                style={{marginTop:"10px"}}
                onClick = {() => {
                    setModal(true);
                }}
            >Create post</Button>


            <Modal visible={modal} setVisible={setModal}>
                <PostForm createItem={createItem}/>
            </Modal>


            <PostFilter filter={filter} setFilter={setFilter}/>


            <PostList posts={searchedAndSortedPosts} title={"ToDo"} deleteItem{deleteItem}/>
        </div>
    );
}

export default App;

PostList.jsx:

import React from 'react';
import {CSSTransition, TransitionGroup} from "react-transition-group";
import PostItem from "./PostItem";
import "../styles/PostList.css"

function PostList({title, posts, deleteItem}) {

    if(posts.length === 0){
        return(
            <div className="post-list">
                <h1>
                    {title}
                </h1>

                <h1 style={{color:"gray" , fontSize:"5em"}}>
                    No Post
                </h1>
            </div>
        );
    }

    return (
        <div className="post-list">
            <h1>
                {title}
            </h1>

            <div>
                <TransitionGroup>
                    {posts.map((post, index) =>
                        <CSSTransition
                            key={post.id}
                            timeout={500}
                            classNames="post"
                        >
                            <PostItem deleteItem={deleteItem} number={index + 1} post={post} />
                        </CSSTransition>
                    )}
                </TransitionGroup>
            </div>

        </div>
    );
}

App.css:

.App{
  width: 800px;
  max-width: 800px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.post-enter {
  transform: translateX(-350px);
}
.post-enter-active {
  transform: translateX(0px);
  transition: all 500ms ease-in;
}
.post-exit {
  opacity: 1;
}
.post-exit-active {
  transform: translateX(-350px);
  transition: all 500ms ease-in;
}