Can't determine correct type to use for Frame's ref prop

[jamesremuscat]

Apropos #215 - I can't seem to find a type signature that TS is happy with when passing a ref into Frame.

const Test = () => {
  const ref = useRef<HTMLIFrameElement>();
  return (
    <Frame ref={ref}>
      Hello
    </Frame>
  );
};

returns the error

error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: FrameComponentProps | Readonly<FrameComponentProps>): FrameComponent', gave the following error.
    Type 'MutableRefObject<HTMLIFrameElement | undefined>' is not assignable to type '((string | ((instance: FrameComponent | null) => void) | RefObject<FrameComponent>) & (((instance: HTMLIFrameElement | null) => void) | RefObject<...>)) | null | undefined'.
      Type 'MutableRefObject<HTMLIFrameElement | undefined>' is not assignable to type 'RefObject<FrameComponent> & RefObject<HTMLIFrameElement>'.
        Type 'MutableRefObject<HTMLIFrameElement | undefined>' is not assignable to type 'RefObject<FrameComponent>'.
          Types of property 'current' are incompatible.
            Type 'HTMLIFrameElement | undefined' is not assignable to type 'FrameComponent | null'.
              Type 'undefined' is not assignable to type 'FrameComponent | null'.
  Overload 2 of 2, '(props: FrameComponentProps, context: any): FrameComponent', gave the following error.
    Type 'MutableRefObject<HTMLIFrameElement | undefined>' is not assignable to type '((string | ((instance: FrameComponent | null) => void) | RefObject<FrameComponent>) & (((instance: HTMLIFrameElement | null) => void) | RefObject<...>)) | null | undefined'.

45     <Frame ref={ref}>
              ~~~

  node_modules/@types/react/index.d.ts:137:9
    137         ref?: LegacyRef<T> | undefined;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FrameComponent> & Readonly<FrameComponentProps>'
  node_modules/@types/react/index.d.ts:137:9
    137         ref?: LegacyRef<T> | undefined;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FrameComponent> & Readonly<FrameComponentProps>'

whilst using FrameComponent gives the error:

error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: FrameComponentProps | Readonly<FrameComponentProps>): FrameComponent', gave the following error.
    Type 'MutableRefObject<FrameComponent | undefined>' is not assignable to type '((string | ((instance: FrameComponent | null) => void) | RefObject<FrameComponent>) & (((instance: HTMLIFrameElement | null) => void) | RefObject<...>)) | null | undefined'.
      Type 'MutableRefObject<FrameComponent | undefined>' is not assignable to type 'RefObject<FrameComponent> & RefObject<HTMLIFrameElement>'.
        Type 'MutableRefObject<FrameComponent | undefined>' is not assignable to type 'RefObject<FrameComponent>'.
          Types of property 'current' are incompatible.
            Type 'FrameComponent | undefined' is not assignable to type 'FrameComponent | null'.
              Type 'undefined' is not assignable to type 'FrameComponent | null'.
  Overload 2 of 2, '(props: FrameComponentProps, context: any): FrameComponent', gave the following error.
    Type 'MutableRefObject<FrameComponent | undefined>' is not assignable to type '((string | ((instance: FrameComponent | null) => void) | RefObject<FrameComponent>) & (((instance: HTMLIFrameElement | null) => void) | RefObject<...>)) | null | undefined'.

45     <Frame ref={ref}>
              ~~~

  node_modules/@types/react/index.d.ts:137:9
    137         ref?: LegacyRef<T> | undefined;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FrameComponent> & Readonly<FrameComponentProps>'
  node_modules/@types/react/index.d.ts:137:9
    137         ref?: LegacyRef<T> | undefined;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FrameComponent> & Readonly<FrameComponentProps>'

I'm using:

• React 18.2.0
• Typescript 4.8.3
• @types/react 18.0.20

I'm new to Typescript so it's possible I'm just doing something wrong, but I can't see what that might be - possibly incompatibility with React v18?

[ryanseddon]

@disintegrator any ideas?

[disintegrator]

@ryanseddon @jamesremuscat I think I've got a solution for this. Check out #227 :)