I am new to react and am trying to figure out how load a page called post when the user clicks on a particular post on a separate blog page. Here is the code below for Post.jsx:

`import { useParams } from "react-router-dom";
import { useQuery } from "@apollo/client";
import { Link } from "react-router-dom";
import { QUERY_SINGLE_POST } from "../utils/helpers";

export default function Post() {
const { postId } = useParams();

const { loading, data, error } = useQuery(QUERY_SINGLE_POST, {
variables: { postId },
});

const post = data?.post || [];

if (loading) {
console.log("Loading:", loading);
return <div>Loading...</div>;
} else if (error) {
console.error("Error fetching data:", error);
console.log("Error:", error);
console.log("Data:", data);
return <div>{error}</div>;
} else {
return (

<h2 className="d-flex justify-content-center m-3 Post">Post</h2>
{post.map((post) => (
<div className="m-3" key={post.id}>
<Link className="post m-4" to={`/blog/${post.id}`}>
<h2>{post.title}</h2>
<h5>{post.dateCreated}</h5>
<p>{post.paragraph}</p>
</Link>
</div>
))}
)
}
}`

Post.js

`const Posts = [
{
"postId": "1",
"titlePost": "Life After Bootcamp",
"dateCreated": "3.25.24",
"paragraph": "With graduation in the books, now it's time to focus on updating my portfolio, gitHub, resume, and linkedIn. Then the goal is to start applying for jobs in development. Now's the time to write down a timeline so that I have targets to stick to and points where I can set time aside to celebrate the small wins."
},
{
"postId": "2",
"titlePost": "Graduation Day",
"dateCreated": "3.13.24",
"paragraph": "After all the hard work and intense studying of code, I have finally graduate from bootcamp. It feels surreal. This time that I have taken to enhance my programming skills in a new language: javascript (well new to me). In this time during the bootcamp, I have learned so much about myself, how tenacious and patient I am under times of stress. Feels good to finally graduate."
},
{
"postId": "3",
"titlePost": "Learning to Accept a Realistic Project is Complete",
"dateCreated": "3.5.24",
"paragraph": "During this bootcamp, I have learned how to balance the priorities of the project and what is needed to complete the project. My main struggle is understanding what is the most important parts that need to be complete as opposed to focusing on the nice to haves. I now make a list of things for everything project and then I go through the list to decide which order I should attack the tasks."
},
{
"postId": "4",
"titlePost": "Designer becoming a Developer",
"dateCreated": "2.23.24",
"paragraph": "I have always had an interest in tech. I even took some programming classes throughout college. Coming back to code in a different time and place in my life is like coming home. I have finally found a place where I can use my design skills and code to create apps. I get to use both sides of me: the creative and logic side together."
},
{
"postId": "5",
"titlePost": "TechBlog Update",
"dateCreated": "2.13.24",
"paragraph": "TechBlog was a difficult project to complete. The main challenge was remembering where what code I am looking for is located. Handlebars taught me to modularize every element throughout the project."
},
{
"postId": "6",
"titlePost": "First Day of Bootcamp",
"dateCreated": "12.11.23",
"paragraph": "The first day of bootcamp is in the books. Great to start a new part of my journey. Just have to remember the growth mindset: that I don't have it yet. It's fun to get back to coding. It's been some time. I am looking forward to to learning all kinds of new javascript."
}
];

export default Posts;

I have tried using the similar structure in blog that works. But I keep getting the error: Objects are not valid as a React child (found: [object Error]). If you meant to render a collection of children, use an array instead.

Here is Blog.jsx that is currently working:

`
import "./Blog.css";
import Posts from "./Posts";
import { Link } from 'react-router-dom'
import "../../main.css";

export default function Blog() {
return (

<h2 className="d-flex justify-content-center m-3 blog">Blog</h2>

      {Posts.map((post) => (
        <div className="m-3" key={post.id}>
          <Link className="post m-4" to={`/blog/${post.postId}`}>
            <h2 key={post.postId}>{post.titlePost} </h2>
            <h5>{post.dateCreated}</h5>
            <p>{post.paragraph}</p>
          </Link>
        </div>
      ))}
    </>
);
}`