nextjs typescript image loader

Question

I'm building a website with NEXT.js typescript. I'm a newbie in typescript.

I need to make ImageLoader because cloudflare pages not support default image loader. but my code is not working and i don't know why.

Loader code:

const normalizeSrc = (src: string) => {
  return src.startsWith("/") ? src.slice(1) : src;
};

const cloudflareLoader = ({
  src,
  width,
  quality,
}: {
  src: string;
  width: number;
  quality: number;
}) => {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }

  const paramsString = params.join(".");
  return `/cdn-cgi/images/${paramsString}/${normalizeSrc(src)}`;
};

Image code:

<Image
  loader={cloudflareLoader}
  src="/images/image-name.png" // image in public/images folder
  height={120}
  width={120}
  alt=""
/>

error:

Type '({ src, width, quality, }: { src: string; width: number; quality: number; }) => string' is not assignable to type 'ImageLoader'.
  Types of parameters '__0' and 'p' are incompatible.
    Type 'ImageLoaderProps' is not assignable to type '{ src: string; width: number; quality: number; }'.
      Types of property 'quality' are incompatible.
        Type 'number | undefined' is not assignable to type 'number'.
          Type 'undefined' is not assignable to type 'number'.

what should I do?

I reffered to https://developers.cloudflare.com/images/image-resizing/integration-with-frameworks/