NextJS API resolved without sending a response

Question

I am learning about getServerSideProps, I have a file 'hello.js' in pages/api/hello.js and the code is:

    function Hello({ data }) {
    return (
        <>
            <h1>{data}</h1>
        </>
    )
}
  
// This gets called on every request
export async function getServerSideProps() {
    // Fetch data from external API
    const res = await fetch(`https://ergast.com/api/f1/2021/drivers.json`)
    const data = await res.json()

    // Pass data to the page via props
    return { props: { data } }
}

export default Hello

I can't access the page due to the following error: API resolved without sending a response for /api/hello, this may result in stalled requests.

The code has been taken from here with a few tweaks: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props