i am getting this Error: A required parameter (post.Id) was not provided as a string in getStaticPaths for /posts/[post.Id]

Even if I manually provide the path as '1' '2' or '3' sometimes it gives me error to res.json() stating that res.json() is not a function

import { useRouter } from "next/router";

function Post({ post }) {
  const router = useRouter();

  if (router.isFallback) {
    return <div>getting Data...</div>;
  }

  return (
    <>
      <h2>
        {post.id} {post.title}
      </h2>
      <p>{post.body}</p>
    </>
  );
}

export default Post;

export async function getStaticProps(context) {
  const { params } = context;
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.postId}`
  );
  const data = await response.json();

  if (!data.id) {
    return {
      notFound: true, //showing 404 page
    };
  }

  console.log(`Generating page for /posts/${params.postId}`);
  return {
    props: {
      post: data,
    },
  };
}

export async function getStaticPaths() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await response.json();
  const paths = data.map((post) => {
    return {
      params: { postId: `${post.id}` },
    };
  });

  return {
    paths,
    fallback: true,
  };
}

this will be generated dynamically