Aquí está mi Posts.jsx, una cosa a tener en cuenta es que las publicaciones de useState no están indefinidas, ya que la consola registra el elemento en el mapa, muestra los objetos de Javascript que son correctos, pero el componente Post no se está procesando y no puedo depurarlo Por favor, ayúdame con esto.

 import axios from "axios"; import { useState, useEffect } from "react"; import { useLocation } from "react-router-dom"; import Post from "../../components/post/Post"; import "./posts.css"; export default function Posts() { const [posts, setPosts] = useState([]); const { search } = useLocation(); useEffect(() => { const fetchPosts = async () => { const res = await axios.get("/posts" + search); setPosts(res.data); }; fetchPosts(); }, [search]); return ( <> <div className="posts"> {posts?.map((p) => { { console.log(p); } <Post post={p} />; })} </div> </> ); }

Este es mi componente Post.jsx que no se está procesando

 import "./post.css"; import { Link } from "react-router-dom"; export default function Post({ post }) { const PF = "http://localhost:5000/images/"; return ( <div className="post"> {post.photo && ( <img className="postImg" src={PF + post.photo} alt="" /> )} <div className="postInfo"> <div className="postCats"> {post.categories.map((c) => ( <span className="postCat">{c.name}</span> ))} </div> <Link to={`/post/${post._id}`} className="link"> <span className="postTitle">{post.title}</span> </Link> <hr /> <span className="postDate"> {new Date(post.createdAt).toDateString()} </span> </div> <p className="postDesc">{post.desc}</p> </div> ); }