How to create an Image component with Image as NextImage and TypeScript?

[dvzrd]

I'm having some TypeScript issues trying to create a reusable UI component that uses NextUI's Image component with the NextImage component. Does anyone know how to create types for such a component which extends image props from both of these components?

I've tried several iterations, but here's one example of the component:

"use client"

import { Image as UIImage } from "@nextui-org/image"
import NextImage, { type ImageProps as NextImageProps } from "next/image"

interface ImageProps extends Omit<NextImageProps, "src"> {
  src: string
}

const Image = (props: ImageProps) => <UIImage as={NextImage} {...props} />

export default Image

Ref to the TypeScript error: https://typescript.tv/errors/#ts2322

Type '{ src: string; alt: string; width?: number | `${number}` | undefined; height?: number | `${number}` | undefined; loading?: "lazy" | "eager" | undefined; key?: Key | null | undefined; crossOrigin?: CrossOrigin; ... 283 more ...; as: ForwardRefExoticComponent<...>; }' is not assignable to type 'IntrinsicAttributes & MergeWithAs<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">, Omit<...>, ImageProps, ForwardRefExoticComponent<...>>'.
  Type '{ src: string; alt: string; width?: number | `${number}` | undefined; height?: number | `${number}` | undefined; loading?: "lazy" | "eager" | undefined; key?: Key | null | undefined; crossOrigin?: CrossOrigin; ... 283 more ...; as: ForwardRefExoticComponent<...>; }' is not assignable to type 'ImageProps'.
    Types of property 'onError' are incompatible.
      Type 'ReactEventHandler<HTMLImageElement> | undefined' is not assignable to type '(() => void) | undefined'.
        Type 'ReactEventHandler<HTMLImageElement>' is not assignable to type '() => void'.
          Target signature provides too few arguments. Expected 1 or more, but got 0.ts(2322)

Am I perhaps doing this wrong? Should I build an image component from scratch with the useImage hook?
I also tried using extendVariants but ran into some issues with the slots and variants, wasn't sure if it was possible to extend this component and couldn't find an example of how to extend a component with slots and variants