How do I fetch data in React Next.js Typescipt?

Question

So I am trying to fetch data from this https://fakestoreapi.com/products api but I don't seem to get the results. I don't know whether my procedure is wrong or I am missing something. I am using next.js on top of react with typescript. Kindly assist me. Below is my code to fetch the data.

import React from 'react'

interface Props {
    products: {
        id: number
        title: string
        price: string
        category: string
        description: string
        image: string
    }[]
}

export const getStaticProps = async () => {
    const response = await fetch("https://fakestoreapi.com/products")
    const jsonResponse = await response.json()

    console.log(jsonResponse);
    

    return {
        props: { products: jsonResponse }
    }
}

const FetchProducts = ({ products }: Props) => {
  return (
    <div>
        <h1>fetchProducts</h1>

        {products.map(product => (
            <div key={product.id}>
                {product.title}
            </div>
        ))}
    </div>
  )
}

export default FetchProducts