cartPage.js:32 Uncaught TypeError: Cannot read properties of null (reading ‘_id’)

i was trying to make the cart page for my ecommerce website, i passed the product data and quantity correctly in productpage.js.

and in cartpage.js when i try to map and display the fetched data from productpage in a table its showing like this in console “cartPage.js:32 Uncaught TypeError: Cannot read properties of null (reading ‘_id’)”

i think the map is not getting the data, but when i print the data in cart like this “console.log(cart)” it shows all the product details with quantity

i think the map is getting the data as null.
please anybody suggest a change in the code

Cartpage.js

import Layout from "./../components/Layout/Layout";
import { useCart } from '../context/cart';
import { useAuth } from '../context/auth';
import { useNavigate } from 'react-router-dom';

function CartPage() {

    const [cart, setCart] = useCart();
    const [auth, setAuth] = useAuth()
    const navigate = useNavigate()
    console.log(cart)
    
    return (
        <Layout>
            <h1>Hi,{auth?.token && auth?.user.username}</h1>
            <h1>{cart?.length} products in Cart</h1>
            <div>
                <h3>Users</h3>
                <div className='tb'>
                    <table>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Orders Placed</th>
                                <th>Date of Sign Up</th>
                            </tr>
                        </thead>
                        <tbody>
                        {cart.length > 0 && cart.map(product => (
                                <tr key={product ._id}>
                                    <td><img src={`http://localhost:3000/uploads/${product .images[0]}`} alt="" style={{ height: "60px" }}></img></td> 
                                    <td>{product .name}</td>
                                    <td>qty</td>
                                    <td>{product .mrp}</td>
                                </tr>
                            ))}
                        </tbody>

                    </table>
                </div>

            </div>
        </Layout>
    )
}

export default CartPage ```

productpage.js

    import React, { useState, useEffect } from "react";
import Layout from './../components/Layout/Layout.js';
import { useParams } from "react-router-dom";
import toast from "react-hot-toast";
import axios from "axios";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Tab, Nav } from 'react-bootstrap';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import "./productpage.css"
import { useCart } from "../context/cart";



const ProductPage = () => {
    const [product, setProducts] = useState([]);
    //const navigate = useNavigate();
    const[cart,setCart]=useCart()
    const params = useParams();
    const [name, setName] = useState("");
    const [description, setDescription] = useState("");
    const [mrp, setMrp] = useState("");
    const [selectedImages, setSelectedImages] = useState([]);
    const[Quantity,setQuantity]=useState(1)


    const getSingleProduct = async () => {
        try {
            const { data } = await axios.get(`/api/v1/product/product-page/${params.id}`);
            setProducts(data);
            setName(data.product.name);
            setDescription(data.product.description);
            setSelectedImages(data.product.images);
            setMrp(data.product.mrp);

            if (data.success) {

            }
        } catch (error) {
            console.log(error);
            toast.error("Something wwent wrong in getting catgeory");
        }
    };

    useEffect(() => {
        getSingleProduct(params.id);
        //eslint-disable-next-line
    }, []);

    return (

        <Layout>
            <div className="pdiv">
                <Row xs={1} md={2} className="g-4 row row-cols-md-2 row-cols-1">
                    <Col className="colone">
                        <img src={`http://localhost:3000/uploads/${selectedImages[0]}`} alt="" style={{ width: "80%" }}></img>
                    </Col>
                    <Col className="coltwo">
                        <h2 className="modln">{name}</h2>
                        <h3 className="mmrp">₹{mrp}.00</h3>
                        <label className="mrlabel">Sales Tax Included</label><br/>
                        <label className="qtylabel">Quantity</label>
                        <input type="number" min={1} defaultValue={1} className="qty" style={{ display: "block" }} value={Quantity} onChange={(e)=>{
                           setQuantity( e.target.value)
                        }} />
                        <button className="addtc" onClick={()=>{
                            setCart([...cart,product,Quantity])
                        }}>Add to Cart</button><br />
                        <button className="buy">Buy Now</button>
                    </Col>

                </Row>
                <Row xs={1} md={2} className="g-4 row row-cols-md-2 row-cols-1">
                    <pre className="descpre">{description}</pre>
                </Row>
            </div>
        </Layout >

    )
}


export default ProductPage