[TypeScript / Next.js Example] Link component not compatible with latest alpha

Using TS 4.x, Material UI latest alpha and next.js latest I am getting the following error in the Link.tsx component

if (naked) {
    return (
      <NextComposed
        className={className}
        ref={innerRef}
        href={href}
        {...other}
      />
    )
  }

the error comes when assigning the innerRef to the ref prop of the NextComposed component

Type '((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | (((instance: HTMLAnchorElement | null) => void) & ((instance: any) => void)) | ... 4 more ... | undefined' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
  Type 'RefObject<HTMLSpanElement>' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
    Type 'RefObject<HTMLSpanElement>' is not assignable to type 'RefObject<HTMLAnchorElement>'.
      Type 'HTMLSpanElement' is missing the following properties from type 'HTMLAnchorElement': charset, coords, download, hreflang, and 21 more.

I’ve only been working with TS for a few weeks now so not able to figure out the correct typings required here.

Any help would be appreciated

[matchatype]

Hey @oliviertassinari you are right, it does fix it… feeling so dumb now 🤪 I’ll be happy to push a PR for that 🙂

[deldrid1]

+1 based on the feedback to #22452.

Repro is here: https://codesandbox.io/s/infallible-forest-65g4d?file=/src/Link.tsx

Opening a terminal window and running npx tsc --noEmit will spit out the error.

sandbox@sse-sandbox-65g4d:/sandbox$ npx tsc --noEmit
src/Link.tsx:56:48 - error TS2322: Type '((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | (((instance: HTMLAnchorElement | null) => void) & ((instance: any) => void)) | ... 4 more ... | undefined' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
  Type 'RefObject<HTMLSpanElement>' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
    Type 'RefObject<HTMLSpanElement>' is not assignable to type 'RefObject<HTMLAnchorElement>'.
      Type 'HTMLSpanElement' is missing the following properties from type 'HTMLAnchorElement': charset, coords, download, hreflang, and 21 more.

56     return <NextComposed className={className} ref={innerRef} href={href} {...other} />;
                                                  ~~~

  node_modules/@types/react/index.d.ts:140:9
    140         ref?: Ref<T>;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "dir" | "slot" | "style" | "title" | ... 257 more ... | "referrerPolicy"> & LinkProps & RefAttributes<...>'


Found 1 error.