image turns to undefined after rendering successfully

image turns to undefined after rendering successfully. I retriever the images from database successfully, and it turns to undefine. I don’t know why this is happening.

this is the cart page

"use client";
import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchCartItems } from "@/redux/cart/cartSlice";
import CartItem from "@/components/CartItem";
import { Button } from "antd";
const Cart = () => {
  const { currentUser } = useSelector((state) => state.auth);
  const { cartItems } = useSelector((state) => state.cart);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  const dispatch = useDispatch();
  const userId = currentUser._id;

  const totalPrice = cartItems.reduce(
    (summedPrice, product) =>
      summedPrice +
      (product.promotionRate || product.promotionRate > 0
        ? product.price - product.price * (product.promotionRate / 100)
        : product.price) *
        product.quantity,
    0
  );

  useEffect(() => {
    setLoading(true);
    const fetchProducts = async () => {
      try {
        const res = await fetch(
          `http://localhost:8000/backend/cart/getCartItems/:${userId}`
        );
        const data = await res.json();
        if (data.success === false) {
          setLoading(false);
          setError(data.message);
        }
        dispatch(fetchCartItems(data.data.items));
      } catch (error) {
        setError(error.message);
        setLoading(false);
      }
    };
    fetchProducts();
  }, []);

  return (
    <div className="flex w-full m-auto justify-between bg-gray-300">
      <div className="border w-1/6 bg-white m-2 rounded-md flex flex-col items-center pt-2 h-[250px] min-h-[200px]">
        <div className="flex justify-between w-full px-10">
          <p>{cartItems.length}</p>
          <p>عدد السلع</p>
        </div>
        <div className="flex justify-between w-full px-10 mt-10">
          <p>{totalPrice}</p>
          <p>اجمالي السعر</p>
        </div>
        <div className="pt-4 flex item">
          <button className="bg-accent text-center text-white px-4 py-2 mt-4 rounded-md hover:bg-primary">
            استمر في الشراء
          </button>
        </div>
      </div>
      {!currentUser ? (
        <div>
          <p>Pleas sign in</p>
        </div>
      ) : (
        <div className="flex-1  w-10/12 bg-white m-2 rounded-md">
          {cartItems.map((item) => (
            <CartItem userId={currentUser._id} product={item} />
          ))}
        </div>
      )}
    </div>
  );
};

export default Cart;

and this is the cart item component

"use client";
import { fetchCartItems } from "@/redux/cart/cartSlice";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
const cartItem = ({ userId, product }) => {
  const [itemQuantity, setItemQuantity] = useState(product.quantity);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
    setLoading(true);
    const updateCartProduct = async () => {
      try {
        const res = await fetch(
          "http://localhost:8000/backend/cart/updateCart",
          {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              userId,
              productId: product.productId,
              quantity: itemQuantity,
            }),
          }
        );

        const data = await res.json();

        if (data.success === false) {
          setLoading(false);
          setError(data.message);
        }
        dispatch(fetchCartItems(data.data.items));
      } catch (error) {
        setError(error.message);
        setLoading(false);
      }
    };
    updateCartProduct();
  }, [itemQuantity]);

  console.log(product.image);
  return (
    <div className="w-full">
      <div className="w-1/2 border-t-2 m-auto mt-6 pt-4 pb-8 flex justify-between ">
        {/* price on the left side  */}
        <div className="gap-1 flex">
          <p>جنيه</p>
          <p className="pt-1">{product.price}</p>
        </div>
        {/* title on the middle */}

        <div className="flex flex-col">
          <div>
            <p>{product.title}</p>
          </div>
          <div className="flex gap-10 justify-center mt-10">
            <div className="">
              <i
                onClick={() => setItemQuantity(Math.max(1, itemQuantity - 1))}
                class="cursor-pointer ri-subtract-line"
              ></i>{" "}
            </div>
            <p>{itemQuantity}</p>
            <div>
              <i
                onClick={() => setItemQuantity(itemQuantity + 1)}
                class="cursor-pointer ri-add-line"
              ></i>
            </div>
            <p>الكمية</p>
          </div>
        </div>

        {/* image on the right  */}

        <div>
          {!product.image ? (
            ""
          ) : (
            <Image
              src={product.image}
              width={100}
              height={100}
              alt={product.title}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default cartItem;

this is the console log

i don’t have any clue on how to solve this. I am doing the same thing in other pages but i don’t get undefined when retrieving images.