Через метод fetch с помощью createAsyncThunk (TypeScript) пост добавляется, но в UI текст поста не виден

Когда с помощью createAsycnThunk на TypeScript создаю новый пост, то он добавляется без ошибок, но в UI в списке постов он отображается некорректно, то есть: текст поста не видно. // это слайс

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

type Post = {
    id: number,
    userId: number,
    title: string | number,
    body: string | number
}

type Posts = {
    posts: Array<Post>
}

const initialState: Posts = {
    posts: []
}

export const fetchPosts = createAsyncThunk<Post[], undefined, {rejectValue: string}> (
    'posts/fetchPosts',
    async function (_, {rejectWithValue}) {
            const response = await fetch('https://jsonplaceholder.typicode.com/posts/?_limit=5');
            if(!response.ok){
                return rejectWithValue('oops can not find posts')
            }
        const data = await response.json();
        return data;
    }
);

export const fetchAddPost = createAsyncThunk<Post, string, {rejectValue: string}>(
    'posts/fetchAddPost',
    async function (text, {rejectWithValue}) {
        console.log(text)
        const post = {
            userId: 1,
            title: 'my title',
            body: text
        }
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({post})
        });

        if(!response.ok) {
            return rejectWithValue('oops, can not to add new post')
        }
        
        return (await response.json()) as Post;
    }
)

const postsSlice = createSlice({
    name: 'posts',
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder
            .addCase(fetchPosts.fulfilled, (state, action) => {
                console.log('fetchPosts: was fulfilled');
                state.posts = action.payload;
            })
            .addCase(fetchAddPost.fulfilled, (state, action) => {
                console.log('fetchAddPost: was fulfilled');
                
                state.posts.push(action.payload);
            })  
    }
})

export const {  } = postsSlice.actions;
export default postsSlice.reducer;

//это мой App

import {  useState } from 'react';
import './App.css';
import { useAppDispatch, useAppSelector } from './store/hooks';
import { fetchAddPost, fetchPosts } from './store/postsSlice';


const App: React.FC = () => {

  const [text, setText] = useState('');
  const posts = useAppSelector( state => state.posts.posts);
  const dispatch = useAppDispatch();
  
  return (
    <div>
      <button onClick={() => {dispatch(fetchPosts())}}>show posts</button>
      <div>
        <div>
          <input type="text" value={text} onChange={(e) => {setText(e.target.value)}} />
        <button onClick={() => {dispatch(fetchAddPost(text))}} >add new post</button>
      </div>
      <ul>
        {posts.map((post) => {
          return <li key={post.id} >{post.id}. {post.body}
          <div>
            <button>delete post</button>
          </div>
          </li>
        })}
      </ul>
      
      </div>
    </div>
  )
}

export default App;

// это store

import { configureStore } from "@reduxjs/toolkit";
import postsSlice from "./postsSlice";

const store = configureStore({
    reducer: {
        posts: postsSlice
    }
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch;

export default store;

// это hooks

import { RootState, AppDispatch } from './store';
import { useSelector, useDispatch } from "react-redux";
import type { TypedUseSelectorHook } from 'react-redux';

export const useAppDispatch  = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;