React not rendering a component [duplicate]

Question

Here is my Posts.jsx, One thing to be noted that the useState posts is not undefined as I console log the element in the map it is showing Javascript objects that are correct , but the Post component is not rendering and I'am unable to debug it. Please help me with this.

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>
        </>
    );
}

This is my Post.jsx component which is not rendering

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>
    );
}

Answer 1

Change this

{posts?.map((p) =>{
              {console.log(p)}
            <Post post = {p} />
          })}

to this

{posts?.map((p) => (
              {console.log(p)}
            <Post post = {p} />
          ))}