Sanity.io: Unable to resolve image URL from source (undefined)

Question

I was fetching my images in cart page. I wanted just 1 image so my code is below if you guys help me out my pleasure.

import { urlFor } from "@/sanity/lib/image";
import createImageUrlBuilder from "@sanity/image-url";
import { SanityImageSource } from "@sanity/image-url/lib/types/types";
import { dataset, projectId } from "../env";
// Initialize the image URL builder
const builder = createImageUrlBuilder({ projectId, dataset });
// Function to generate image URLs from Sanity images
export const urlFor = (source: SanityImageSource) => {
 return builder.image(source);
};

And below is my cart page while I am fetching images

if (!product || !product.images || !product.images.length) return null;
return (
 <div
 key={index}
 className="h-auto flex items-start mb-5 space-x-4 p-4 dark:bg-slate-900 border rounded-xl shadow-sm"
 >
 <div className="relative h-20 w-20 rounded-lg overflow-hidden">
 <Image
 src={urlFor(product?.images[0]?.asset?._ref).url() || "/noimage.png"}
 alt={"Product Image"}
 fill
 className="object-cover"
 loading="lazy"
 />
 </div>
 </div>
);

• coreyward: It'd be helpful if you shared 1) the error or issue, 2) the value of product.images[0].asset._ref, and 3) what Image is. Without any of that, it's really hard to give you any kind of direction.
• Muhammad Hasnain: 1: I see a issue undefined. 2) vlaue of product.images[0].asset.._ref is shown unrefined. 3) image is a product image