How do I render the image in Sanity blockcontent into a custom image component?

import { PortableText } from '@portabletext/react';
import Image from 'next/image'; // or your preferred image component
import imageUrlBuilder from '@sanity/image-url';

// Set up image URL builder
const builder = imageUrlBuilder(client);

function urlFor(source) {
  return builder.image(source);
}

// Your custom image component with full control
const CustomImageComponent = ({ value }) => {
  if (!value?.asset?._ref) {
    return null;
  }

  return (
    <div className="my-8 relative">
      <Image
        src={urlFor(value).width(800).url()}
        alt={value.alt || 'Blog image'}
        width={800}
        height={600}
        className="w-full h-auto cursor-zoom-in"
        onClick={() => {
          // Your custom zoom logic here
        }}
        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 800px"
      />
      {value.caption && (
        <p className="text-sm text-gray-600 mt-2">{value.caption}</p>
      )}
    </div>
  );
};

// Define your custom components
const components = {
  types: {
    image: CustomImageComponent,
    // You can add other custom types here
  },
  marks: {
    // Custom marks like links, highlights, etc.
  },
};

// Use in your blog post
function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <PortableText 
        value={post.body} 
        components={components}
      />
    </article>
  );
}