Hi I´m trying to fetch data and display it in a list but somehow it isn´t working. Can someone tell me whats wrong with the following function? It isn´t displaying anything or it is telling me that the data isn´t valid as child props. thanks for answers.

export async function getServerSideProps(context) {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const data = await res.json()

  return {
    props: { data }, // will be passed to the page component as props
  }
}


export default function Home({data}) {


  return (
    <div>
      <h1>Hello World</h1>
      <div>
        {
          data.forEach(item => {
            return <li>{item.title}</li>
          })
        }
      </div>
    </div>
  )
}