react rendering empty page without any errors

so i write simple react project with redux toolkit and typescript, i dont have error but i dont understand why is my page empty, hear is my code, so i have Post model and tryning get api from jsonplaceholder site, i try write different code but still blank page, I'm still just practicing, I'm new to React

export interface Post {
userId: number;
id: number;
title: string;
body: string;
}

export const getPost = createAsyncThunk(
'post/getPost',
async (_, {rejectWithValue, dispatch}) => {
    const res = await axios.get('https://jsonplaceholder.typicode.com/posts')
    dispatch(getPostDate(res))

}
)

export const PostSlice = createSlice({
name: 'post',
initialState: {
    data: [],
    isSuccess: false,
    message: "",
    isLoading: false
},
  reducers: {
    getPost(state) {
        state.isLoading = true
    },
    getPostDate(state, {payload}) {
        state.data = payload
    }
},
extraReducers:  {
    [getPost.fulfilled.toString()]: (state, action) => {
         state.data = action.payload
    }
},
})
   export const {
  getPostDate,
 } = PostSlice.actions
 export default PostSlice.reducer;

 export const store = configureStore({
reducer: {
    lorem: PostSlice
}
})
export default store

root.render(
<Provider store={store}>
 <App/>
 </Provider>
);

function App() {
const dispatch = useAppDispatch()
const post = useAppSelector<Post[]>(state => state.lorem.data)
useEffect( () => {
dispatch(getPost())
}, [dispatch])

return (
<div className="App">
  { post.map( (post) => (
      <h1 key={post.id}>{post.title}</h1>
  )) }
</div>
);
}
export default App;