I am currently following a tutorial on PERN stack and whenever I try to print out the contents of an array to the screen to be under title and content, nothing prints out.

Here is my code where the error relies somewhere within:

import React, { Fragment, useState, useEffect } from "react";

const ListBlog = () => {
  const [blogs, setBlogs] = useState([]);

  const getBlogs = async () => {
    const res = await fetch('http://localhost:5000/blog');

    const blogArray = await res.json();

    setBlogs(blogArray)
  }

  useEffect(() => {
    getBlogs();
  }, [])

  console.log(blogs)
  return <Fragment>
    {" "}
    <table className="table mt-5">
    <thead>
      <tr>
        <th>Title</th>
        <th>Content</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
    {/* <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
</tr>*/}
     {
       blogs.map(blog => {
         <tr>
           <td>
             {blog.title}
           </td>
           <td>{blog.content}</td>
           <td>Edit</td>
           <td>Delete</td>
         </tr>
       })
     }
    </tbody>
  </table>
  </Fragment>
}

export default ListBlog;

I believe the state is causing errors as it is printing out the following:

(2) [{…}, {…}]0: {post_id: 1, title: 'hi', content: 'howdy'}1: {post_id: 11, title: 'eat', content: 'yogurt'}length: 2[[Prototype]]: Array(0)
[object Object],[object Object]

I just want to print out the array but for some reason [Object object] is printing out as well which may be causing my contents not to print to my localhost page.

Here is what my page looks like when I try to have my contents within the array print underneath title, content, Edit, and Delete but nothing gets displayed...