this is my component.

import React, { useEffect, useState } from "react";
import { CloseIcon} from "@/components/SvgComponent"
import ImageWithBlur from "@/components/ImageWithBlur"
import { GeneratedImage } from "models";
import  {getBlurData}  from "utils/BlurDataUrlGenerator"; 

type ViewFullImageProps = {
    image: GeneratedImage;
    onClose: ()=>void
}


const ViewFullImage =  ({image, onClose}:ViewFullImageProps) => {
  const [blurDataURL, setBlurDataURL] = useState<string | undefined>(undefined);

  useEffect(() => {
    const fetchBlurDataURL = async () => {
      try {
        const blurData = await getBlurData(image.imageUrl);     
        console.log("blurData", blurData)
      } catch (error) {
        console.error("Error fetching blur data:", error);
      }
    };

    fetchBlurDataURL();
  }, [image.imageUrl]);
  return (
    <>
        <div className="bg-[#E8E8E8] h-full pt-7 pb-[60px] px-10 relative">
            <div className="h-full pt-7">
                <ImageWithBlur 
                    src={image.imageUrl}
                    height={500}
                    width={600}
                    priority={true}
                    alt="Ai generated"
                    className="object-contain w-full h-full"
                     placeholder="blur"
                    blurDataURL={base64}
                />
               
            </div>

        </div>
    </>
  );
};

export default ViewFullImage;

This is my utils file:

import { getPlaiceholder } from "plaiceholder";
async function getBlurData(src: string): Promise<string> {
  try {
    const response = await fetch(src);

    const buffer = await response.arrayBuffer();
    const { base64 } = await getPlaiceholder(buffer);
    return base64;
  } catch (error) { 
    throw error; 
  }
}

export { getBlurData };

When I run my code it give error. How can I solve this problem? Is there any other way to create Image blurDataURL?