Как использовать wrapper над компонентом Image?

Я использую Next.js React Framework. Я сделал обертку над компонентом Image из next\image (https://nextjs.org/docs/api-reference/next/image)

import Image from "next/image";
import { useDeviceDetect } from "helpers";

const NextImage = ({
  src,
  width,
  height,
  alt,
  quality,
  ...rest
}) => {

}
  const { isIE, isSafari } = useDeviceDetect();
  const isSupportWebp = isIE || isSafari;

  return (
    <Image
      loader={({ src: imageSrc, width: imageWidth }) => customLoaderImage(imageSrc, imageWidth, isSupportWebp)}
      src={src}
      alt={alt}
      width={width}
      height={height}
      quality={quality}
      {...rest}
    />
  );
};

export default NextImage;

customLoader я хотел бы импортировать из другого файла в файл с компонентом NextImage, а в NextImage компоненте использовать так:

return (
    <Image
      loader={customLoader}
      src={src}
      alt={alt}
      width={width}
      height={height}
      quality={quality}
      {...rest}
    />
  );

Каким образом это можно сделать?