title: hygraph and next.js component not showing up on import
body: <p>When I try to import into a next.js page the container div is the only thing showing up, am I importing or exporting incorrectly? If I use the Component as a page itself, everything displays correctly but I cant add a page wide container for the blogposts</p>
  <p>Component</p>
  <pre><code>import { GraphQLClient } from 'graphql-request';
  
  export async function getStaticProps() {
    const hygraph = new GraphQLClient(
      'https://api-us-east-1.hygraph.com/v2/cl7r7p82h60bn01uh5lvrb3ja/master'
    );
  
    const { blogposts } = await hygraph.request(
      `
        {
          blogposts {
            slug
            title
            content{
              text
            }
          }
        }
      `
    );
  
    return {
      props: {
        blogposts,
      },
    };
  }
  
  
  
  export default ({ blogposts }) =&gt;
    blogposts?.map(({ slug, title, content }) =&gt; 
    (
          &lt;div class=&quot;card blog-post&quot; style={{width: &quot;auto&quot;}}&gt;
            &lt;div class=&quot;card-body&quot;&gt;
              &lt;h5 class=&quot;card-title text-center&quot;&gt;{title}&lt;/h5&gt;
              &lt;p class=&quot;card-text&quot;&gt;{content.text}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
    ));
  </code></pre>
  <p>From what I understand I am correctly importing the above component by naming it in the page import but obviously I am missing something or doing something incorrectly</p>
  <p>Page</p>
  <pre><code>import NewsConst from &quot;../components/newscmp&quot;
  
  
  export default function News() {
    return (
      &lt;div className='container-fluid abt-cnt news-cnt'&gt;
        &lt;NewsConst /&gt;
      &lt;/div&gt;
    )
    }
  </code></pre>