mi código de archivo donde estoy completando el código

 import React, { useEffect, useState } from "react"; import blogStyle from "../styles/Blog.module.css"; import Link from "next/link"; function blog() { const [blogs, setBlogs] = useState([]); useEffect(() => { fetch("http://localhost:3000/api/allBlogs") .then((parsingData) => { return parsingData.json(); }) .then((data) => { setBlogs(data); console.log(data); }); }, []); return ( <> <div className={blogStyle.blog}> {blogs.map((blogItem) => { <div className={blogStyle.blogItemTemplate} key={blogItem.title}> <Link href={`/blogPost/how-to-learn-js`}> <h2 className={blogStyle.blogItemHeading}>{blogItem.title}</h2> </Link> <p className={blogStyle.blogItemPara}>{blogItem.content}</p> <div className={blogStyle.blogItemPara}>{blogItem.writer}</div> </div>; })} </div> </> ); }

lo que obtengo en mi imagen localhost aquí

Todo funciona bien, no hay errores en la consola y obtuve los datos obtenidos. Almacené los datos obtenidos en blogs usando useState, que es exitoso, pero cuando uso los blogs en jsx para completar los datos, no aparece nada. Usando la función de mapa, obtuve el título y la descripción cuando lo registré en la consola, pero no se muestra en el host local