Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` There is no problem when I use 'ımg'

Question

product.jsx There is no problem when I use ımg but I want to use Next/image and my old code was link, I edited it as nextLink

import React from 'react'
import NextLink from 'next/link'
import { urlFor } from '../lib/client'
import Image from 'next/image'

const Product = ({ product: { image, name, slug, price } }) => {
  return (
    <div>
    <NextLink href={`/product/${slug.current}`} passHref>
    <div className="product-card">
    <Image
            src={urlFor(image && image[0])}
            alt={name}
            width={250}
            height={250}
            className="product-image"
          />
          <p className="product-name">{name}</p>
          <p className="product-price">${price}</p>
    </div>
    </NextLink>
    </div>
  )
}

export default Product

[slug.js]

I can't figure out why the problem is

 <div className="product-detail-container">
        <div>
          <div className="image-container">
            < Image src={urlFor(image && image[index])} className="product-detail- 
           image" />
          </div>
          <div className="small-images-container">
            {image?.map((item, i) => (
              <Image
                key={i}
                src={urlFor(item)}
                alt={name}
                className={i === index ? 'small-image selected-image' : 'small- 
                image'}
                onMouseEnter={() => setIndex(i)}
              />
            ))}
          </div>
        </div>

next.config.js i am using sanity i added it here to next config file

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}
module.exports = nextConfig,
{
  images:{
    domains: ['cdn.sanity.io'],
  }
}