Почему не обновляется состояние компонента React?

Это компонент App

import React, {useMemo, useState} from "react";
import './style/App.css';
import PostList from "./components/PostList";
import PostForm from "./components/PostForm";
import PostFilter from "./components/PostFilter";
import MyModal from "./components/UI/MyModal/MyModal";
import MyButton from "./components/UI/button/MyButton";


function App() {
  
  const [posts,setPosts] = useState([
    {id:1,title:'Javascript', body:'123'},
    {id:2,title:'rr 2', body:'wer'},
    {id:3,title:'bbript 3', body:'fre'},
    {id:4,title:'kolvascript 4', body:'abc'},
  ]);

  const [filter, setFilter] = useState({sort:'',query:''})
  const [modal, setModal] = useState(false);

  const sortedPosts = useMemo(()=>{
    if(filter.sort){
      return [...posts].sort((a,b)=> a[filter.sort].localeCompare(b[filter.sort]));
    }
    return posts;
  },[filter.sort, posts])

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

  const createPost = (newPost) => {
    setPosts([...posts, newPost]);
    setModal(false);
  } 

  const removePost = (post)=>{
    setPosts(posts.filter(p => p.id !== post.id));
  }


  return (
    <div className="App">
      <MyButton style ={{marginTop:30}} onClick={()=>setModal(true)}>
        Створити користувача
      </MyButton>
      <MyModal visible={modal} setVisible={setModal}>
        <PostForm create = {createPost}/>
      </MyModal>
      <hr style={{margin:'15px 0'}}/>
      <PostFilter 
        filter={filter} 
        setFilter = {setFilter}
      />
      <PostList remove = {removePost} posts = {sortedAndSearchedPosts} title={'Пости про JS'}/>
    </div>
  );
}

Это компонент PostForm

import React, { useState } from "react";
import MyButton from "./UI/button/MyButton";
import MyInput from "./UI/input/MyInput";

const PostForm = ({create})=>{
    const [post, setPost] = useState({title:'',body:''});
    
    const addNewPost = (e)=>{
        e.preventDefault();
        const newPost = {
            ...post, id:Date.now(),
        }
        create(newPost);
        setPost({title:'',body:''});
      }
    return(
        <form>
            <MyInput 
                value = {post.title}
                onChange = {e=>setPost({...post, title:e.target.value})}
                type="text" 
                placeholder = "Назва поста"
            />
            <MyInput
                value = {post.body}
                onChange = {e=>setPost({...post, body:e.target.value})}
                type="text" 
                placeholder="Опис поста"
            />
            <MyButton onClick={addNewPost}>Створити пост</MyButton>
      </form>
    );
}

Компонент PostForm должен добавлять пост в PostList. И он добавляет, вот только на странице это отображается только после других изменений состояния, например изменения порядка сортировки или после поиска по постам.