Undefined Data exporting from contextstate - react-hooks

Question

I'm creating a web app to create post,post comments,edit,deleete, I'm having problem while destructuring data from context i used, it is destructuring as undefined can anyone pease, i'm stuck on this since two days;
postContext.js
import { createContext } from "react";
const postContext = createContext();
export default postContext;
PostState.js
import PostContext from "./postContext";
import { useState } from "react";
const PostState=(props)=>{
const postsinitial =[
{
"_id": "63ed1aa3159fb228fe733188",
"posti": "This is my first note Noopur",
"comment": [
"Hello Noopue this is my first post",
"hello pratik",
"how are you",
"I'm fine pratik"
],
"timestamp": "2023-02-15T17:47:15.296Z",
"__v": 0
}
]
const [posts, setPosts] = useState(postsinitial)
return(
<PostContext.Provider value={{posts,setPosts}}>
{props.children}
</PostContext.Provider>
)
}
export default PostState;
Post.js
import React,{useContext} from 'react'
import postContext from "../context/post/postContext"
import CreatePost from './CreatePost';
import Postitem from './Postitem';
const Posts = () => {
const context = useContext(postContext)
const{posts}={context};
return (
<>
<CreatePost/>
<div className="container">
<h2>Your Posts</h2>
{posts.map((post)=>{
return <Postitem key={post._id} post={post}/>
})}
</div>
</>
);
}
// eslint-disable-next-line
export default Posts;
Guys here is the error in Post while destructing, I dont know what is the problem can anybody help please