hygraph and next.js component not showing up on import

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

Component

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 }) =>
  blogposts?.map(({ slug, title, content }) => 
  (
        <div class="card blog-post" style={{width: "auto"}}>
          <div class="card-body">
            <h5 class="card-title text-center">{title}</h5>
            <p class="card-text">{content.text}</p>
          </div>
        </div>
  ));

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

Page

import NewsConst from "../components/newscmp"


export default function News() {
  return (
    <div className='container-fluid abt-cnt news-cnt'>
      <NewsConst />
    </div>
  )
  }