Uncaught TypeError: Cannot read properties of undefined (reading 'map')というエラーが出てしまいます。

◆実現したいこと： フロントエンドをReactとTypescript、バックエンドをRails APIでTwitter風のサービスを作成したいです。

◆環境：
フロントエンド
"@types/node": "^16.7.13",
"@types/react": "^17.0.20",
"@types/react-dom": "^17.0.9",
"axios": "^0.25.0",
"axios-case-converter": "^0.9.0",
"date-fns": "^2.28.0",
"js-cookie": "^3.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",

バックエンド
ruby '3.0.3'
gem 'rails', '~> 6.1.4', '>= 6.1.4.4'
gem 'devise'
gem 'devise_token_auth'

◆発生している問題・エラーメッセージ
投稿した内容を取得し、一覧で表示させようとしているのですが、下記のエラーが出てしまい、表示ができない状況です。

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at PostList (PostList.tsx:21:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at updateFunctionComponent (react-dom.development.js:17356:1)
    at beginWork (react-dom.development.js:19063:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

※取得したデータは、返ってきているので、React側で値の受け渡しがうまくいっていないのだと考えているのですが、
投稿一覧を表示できずにいます。

{data: {…}, status: 200, statusText: 'OK', headers: {…},

◆該当のソースコード

App.tsx
1import React, { useState, useEffect, createContext } from "react";
2import {
3  BrowserRouter as Router,
4  Routes,
5  Route,
6  Navigate,
7} from "react-router-dom";
8
9import PrivateRoute from "lib/PrivateRoute";
10
11import CommonLayout from "components/layouts/CommonLayout";
12import Home from "components/pages/Home";
13import SignUp from "components/pages/SignUp";
14import SignIn from "components/pages/SignIn";
15
16//user
17import { getCurrentUser } from "lib/api/auth";
18import { User } from "interfaces/index";
19
20//post(コンペ)
21import { PostList } from "components/pages/PostList";
22import { PostForm } from "components/pages/PostForm";
23import { getPost } from "lib/api/post";
24import { PostData } from "interfaces/index";
25import { PostAddSharp } from "@material-ui/icons";
26
27// グローバルで扱う変数・関数
28export const AuthContext = createContext(
29  {} as {
30    loading: boolean;
31    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
32    isSignedIn: boolean;
33    setIsSignedIn: React.Dispatch<React.SetStateAction<boolean>>;
34    currentUser: User | undefined;
35    setCurrentUser: React.Dispatch<React.SetStateAction<User | undefined>>;
36  }
37);
38
39const App: React.FC = () => {
40  const [loading, setLoading] = useState<boolean>(true);
41  const [isSignedIn, setIsSignedIn] = useState<boolean>(false);
42  const [currentUser, setCurrentUser] = useState<User | undefined>();
43
44  //post
45  const [posts, setPosts] = useState<PostData[]>([]);
46
47  // 認証済みのユーザーがいるかどうかチェック
48  // 確認できた場合はそのユーザーの情報を取得
49  const handleGetCurrentUser = async () => {
50    try {
51      const res = await getCurrentUser();
52      console.log(res);
53
54      if (res?.status === 200) {
55        setIsSignedIn(true);
56        setCurrentUser(res?.data.currentUser);
57      } else {
58        console.log("No current user");
59      }
60    } catch (err) {
61      console.log(err);
62    }
63
64    setLoading(false);
65  };
66
67  const handleGetPosts = async () => {
68    try {
69      const res = await getPost();
70      console.log(res);
71      if (res?.status === 200) {
72        setPosts(res.data.posts);
73      } else {
74        console.log(res.data.message);
75      }
76    } catch (error) {
77      console.log(error);
78    }
79  };
80
81  useEffect(() => {
82    handleGetCurrentUser();
83  }, [setCurrentUser]);
84
85  useEffect(() => {
86    handleGetPosts();
87  }, [setPosts]);
88
89  // ユーザーが認証済みかどうかでルーティングを決定
90  // 未認証だった場合は「/signin」ページに促す
91  // const Private = ({ children }: { children: React.ReactElement }) => {
92  //   if (!loading) {
93  //     if (isSignedIn) {
94  //       return children;
95  //     } else {
96  //       return <Navigate to="/signin" />;
97  //     }
98  //   } else {
99  //     return <></>;
100  //   }
101  // };
102
103  return (
104    <Router>
105      <AuthContext.Provider
106        value={{
107          loading,
108          setLoading,
109          isSignedIn,
110          setIsSignedIn,
111          currentUser,
112          setCurrentUser,
113        }}
114      >
115        <CommonLayout>
116          <Routes>
117            <Route path="/signup" element={<SignUp />} />
118            <Route path="/signin" element={<SignIn />} />
119            <Route
120              path="/postlist"
121              element={<PostList posts={posts} setPosts={setPosts} />}
122            />
123            <Route
124              path="/postform"
125              element={<PostForm posts={posts} setPosts={setPosts} />}
126            />
127            <Route path="/" element={<Home />} />
128          </Routes>
129        </CommonLayout>
130      </AuthContext.Provider>
131    </Router>
132  );
133};
134
135export default App;
136

PostList.tsx
1import React, { useEffect } from "react";
2import { PostItem } from "components/pages/PostItem";
3import { PostData } from "interfaces/index";
4// import { PostAddSharp } from "@material-ui/icons";
5
6interface PostListProps {
7  posts: PostData[];
8  setPosts: Function;
9}
10
11export const PostList: React.FC<PostListProps> = ({ posts, setPosts }) => {
12  return (
13    <>
14      <table>
15        <thead>
16          <tr>
17            <th>Todos</th>
18            <th></th>
19          </tr>
20        </thead>
21        <tbody>
22          {posts.map((post: PostData, index: number) => {
23            return <PostItem key={index} post={post} setPosts={setPosts} />;
24          })}
25        </tbody>
26      </table>
27    </>
28  );
29};
30

PostItem.tsx
1import React from "react";
2import { deletePost } from "lib/api/post";
3import { PostData } from "interfaces/index";
4
5interface PostItemProps {
6  post: PostData;
7  setPosts: Function;
8}
9
10export const PostItem: React.FC<PostItemProps> = ({ post, setPosts }) => {
11  const handleDetePost = async (id: number) => {
12    try {
13      const res = await deletePost(id);
14      console.log(res);
15
16      if (res?.status === 200) {
17        setPosts((prev: PostData[]) =>
18          prev.filter((post: PostData) => post.id !== id)
19        );
20      } else {
21        console.log(res.data.message);
22      }
23    } catch (error) {
24      console.log(error);
25    }
26  };
27  return (
28    <tr>
29      <td>{post.title}</td>
30      <td>
31        <button onClick={() => handleDetePost(post.id || 0)}>Delete</button>
32      </td>
33    </tr>
34  );
35};
36