При передачи пропса в компонент на выходе получился объект

на основной странице я передам число 2

<PostList pageData={2} />

а на выходе я получил:

PostList pageData prop: {pageData: 2}pageData: 2[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ....

import React from "react";
import usePostList from "./usePostList";
import Post from "../Post/Post";

export default function PostList(pageData) {
  console.log("PostList pageData prop:", pageData);
  const id = pageData.pageData;
  const {
    posts,
    loading,
    error,
    handlePostDeleted,
    handlePostUpdated,
    handleRepostDeleted,
    hasMore,
  } = usePostList(id);
  return (
    <div className="group-posts">
      {loading.posts && (
        <div className="post-placeholder">
          <div className="post-placeholder_head">
            <div className="post-placeholder__avatar"></div>
          </div>
          <div className="post-placeholder__content"></div>
        </div>
      )}
      {error && <div className="error">Error: {error}</div>}
      {posts.map((post) => (
        <Post
          key={
            post.repost_id ? `repost-${post.repost_id}` : `post-${post.post_id}`
          }
          post={post}
          onPostUpdated={handlePostUpdated}
          onPostDeleted={handlePostDeleted}
          onRepostDeleted={handleRepostDeleted}
        />
      ))}

      {loading.posts && hasMore && (
        <div className="loading-dots">
          <span className="loading-dots__dot"></span>
          <span className="loading-dots__dot"></span>
          <span className="loading-dots__dot"></span>
        </div>
      )}
    </div>
  );
}

Что это за бред?? Или я что-то не понимаю. Сразу говорю я новичок, могу жестко тупить