Console.Log Returning Undefined

import React from 'react';
import { Link } from "react-router-dom";
import Header from "../components/Header";
import "./Home.css";
import {Carousel, Card, Image} from 'antd';
import {client} from "../lib/client";


const Home = ({products,bannerData}) => {

  return(
      <>
        <div className="container">
          <Header/>
          <Carousel autoplay className="carousel">
            {bannerData?.map((e) => {
              return <img src={e} className="carousel-img" alt="carousel"></img>;
            })}
          </Carousel>
          <div className="cards">
            <Card className="card">{products?.map((product)=>{
              return(
                  <div key={product.Slug}>
                  <h1>{product.Name}</h1>
                  <img src={product.Image} alt={product.Name} className="card-content"/>
                  <br />
                  <Link to="/categories" state={product.Genre} className="link">
                    Shop Now
                  </Link>
                  </div>
              )
            })}


            </Card>
          </div>
        </div>
      </>
  )


}
export const 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;

const Home = ({products, bannerData}) => {
  console.log({ products, bannerData });