I am having issue with my image src in next.js

I am using Sanity image url in my project and I am getting this error in my console page that says
“next-dev.js?3515:25 Warning: Prop src did not match. Server: “https://cdn.sanity.io/images/jbcyg7kh/production/4f6d8f5ae1bed2647201bfcaed2f270897b92306-800×533.jpg” Client: “https://cdn.sanity.io/images/jbcyg7kh/undefined/4f6d8f5ae1bed2647201bfcaed2f270897b92306-800×533.jpg”

    import sanityClient from "@sanity/client";
import  imageUrlBuilder  from "@sanity/image-url";



export const client = sanityClient({
    projectId:"projectId",
    dataset:process.env.NEXT_SANITY_DATASET,
    useCdn: true,
    apiVersion:"2022-05-13"
});


const builder = imageUrlBuilder(client)

export const urlFor= (source) =>builder.image(source)

    enter code here



    import Link from "next/link";
import React from "react";
import { urlFor } from "../lib/client";

function Product({ product: { name, image, price, description, slug } }) {
  return (
    <div>
      <Link href={`/product/${slug.current}`}>
        <div>
          <img src={urlFor(image[0])} alt="" />
          <h4>{name}</h4>
          <p>₦{price}</p>
          <p>{description}</p>
        </div>
      </Link>
    </div>
  );
}

export default Product;