Am I assigning a ref the right way? TS errors when using `htmlAttributes={{ref: ...}}`

[tremby]

In the docs it says I can attach a ref to the DOM element like this:

<Imgix htmlAttributes={{ ref: handleRef }}>

Here's what I'm doing, boiled down to the simplest case:

  const ref = useRef<HTMLImageElement>(null);
  return <Imgix htmlAttributes={{ref}} />;

TS complains:

No overload matches this call.
  Overload 1 of 2, '(props: SharedImgixAndSourceProps | Readonly<SharedImgixAndSourceProps>): Imgix', gave the following error.
    Type 'RefObject<HTMLImageElement>' is not assignable to type 'string'.
  Overload 2 of 2, '(props: SharedImgixAndSourceProps, context: any): Imgix', gave the following error.
    Type 'RefObject<HTMLImageElement>' is not assignable to type 'string'.

If I pass the ref I actually want to pass, which is a RefCallback, I get a different error:

  const { ref } = useResizeObserver<HTMLImageElement>();
  return <Imgix htmlAttributes={{ref}} />;

No overload matches this call.
  Overload 1 of 2, '(props: SharedImgixAndSourceProps | Readonly<SharedImgixAndSourceProps>): Imgix', gave the following error.
    Type 'RefCallback<HTMLImageElement>' is not assignable to type 'string'.
  Overload 2 of 2, '(props: SharedImgixAndSourceProps, context: any): Imgix', gave the following error.
    Type 'RefCallback<HTMLImageElement>' is not assignable to type 'string'.

I wonder if something is wrong with the types or implementation, or if I'm doing something wrong.

[tremby]

I should note that if I ignore the error, the functionality is working just fine.