I am trying to just simply display data from a public api (in this case nfl teams) and I can't seem to get past this Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. error. This is super simple code and I am sure that it's really easy to fix, but can someone help me to get started on this?

Here is my code:

export default async function Home({data}) {
  return (
    <>
      <div>
        {data.sports[0].id}
      </div>
    </>
  )
}

export const getServerSideProps = async () => { 
  const query = await fetch('https://site.api.espn.com/apis/site/v2/sports/football/nfl/teams');
  const data = await query.json();
  return { 
    props: { 
      data
    }
  }
}

Let me know if there is any other info you need.