Console.Log Returning Undefined

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

const Home = () => {
  const [products, setProducts] = useState([]);
  const [bannerData, setBannerData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const productsQuery = `*[_type == "product"]`;
        const productsResult = await client.fetch(productsQuery);
        
        const bannerQuery = `*[_type == "banner"]`;
        const bannerResult = await client.fetch(bannerQuery);
        
        setProducts(productsResult);
        setBannerData(bannerResult);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <div className="container">
      <Header/>
      <Carousel autoplay className="carousel">
        {bannerData?.map((e, index) => (
          <img key={index} src={e} className="carousel-img" alt="carousel" />
        ))}
      </Carousel>
      <div className="cards">
        <Card className="card">
          {products?.map((product) => (
            <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 default Home;