title: NEXT.JS: Objects are not valid as a React child when calling api route
body: <p>I'm creating a page that will call my API route to return the value from my collection using MongoDB. But I'm having this error of Objects are not valid as a React child. I don't know why this happening. Can you please help me?</p>
  <p><strong>pages/index.js</strong></p>
  <pre><code>export const getServerSideProps = async () =&gt; {
    const res = await fetch('http://localhost:3000/api/listings');
    const data = await res.json();
  
    if (!data) {
      return {
        notFound: true,
      };
    }
  
    return { props: { data } };
  };
  
  const index = async ({ data }) =&gt; {
    return (
      &lt;&gt;
        &lt;section className='w-screen h-screen bg-hero-pattern bg-cover bg-no-repeat bg-bottom'&gt;&lt;/section&gt;
        {data.map((prop) =&gt; (
          &lt;div key={prop._id}&gt;
            &lt;h1&gt;{prop.name}&lt;/h1&gt;
            &lt;h2 className='text-2xl truncate'&gt;{prop.summary}&lt;/h2&gt;
            &lt;p&gt;{prop.description}&lt;/p&gt;
          &lt;/div&gt;
        ))}
      &lt;/&gt;
    );
  };
  </code></pre>
  <p><strong>pages/api/listings</strong></p>
  <pre><code>import { connectToDatabase } from '../../middlewares/mongodb';
  
  export const fetchDbData = async () =&gt; {
    const { db } = await connectToDatabase();
    const data = await db
      .collection('listingsAndReviews')
      .find({})
      .limit(1)
      .toArray();
    return JSON.parse(JSON.stringify(data));
  };
  
  export default async (req, res) =&gt; {
    const data = await fetchDbData();
    res.status(200).json(data);
  };
  </code></pre>