import React, { FC } from 'react';
import { client } from '../lib/client';
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next';

import {
    HeroBanner,
    Product,
    Cart,
    Footer,
    FooterBanner,
    Navbar,
} from '../components/index';

interface HeroBannerProps {
    heroBanner?: Record<string, string>;
}

const Home: FC = ({
    products,
    bannerData,
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
    return (
        <>
            <HeroBanner HeroBanner={bannerData} />

            <div className="product-heading">
                <h2>Best Selling Produts</h2>
                <p>Speakers of many variants</p>
            </div>
            {/* <div>{products?.map((product: any) => product)}</div> */}
            <Footer />
        </>
    );
};

export const getServerSideProps: GetServerSideProps = async () => {
    const query = '*[_type == "product"]';
    const products = await client.fetch(query);

    const bannerQuery = '*[_type == "banner"]';
    const bannerData = await client.fetch(bannerQuery);

    return {
        props: {
            products,
            bannerData,
        },
    };
};

export default Home;

Getting this error: Type{ HeroBanner: any }is not assignable to type 'InstrinticAttributes'

Any help on this would be appreciated