title: The expected type comes from property 'ref' which is declared here on type
body: <p>I am trying to override component from <code>@mui/material</code></p>
  <pre><code>import { forwardRef } from 'react';
  import {
    ListItemButton as MuiListItemButton,
    ListItemButtonProps as MuiListItemButtonProps,
  } from '@mui/material';
  
  export type ListItemButtonProps = Omit&lt;MuiListItemButtonProps, 'disableRipple'&gt;;
  
  export const ListItemButton = forwardRef&lt;HTMLElement, ListItemButtonProps&gt;(
    (props, ref) =&gt; {
      return &lt;MuiListItemButton ref={ref} {...props} /&gt;;
    }
  );
  
  </code></pre>
  <p>and I get this error:</p>
  <pre><code>No overload matches this call.
    Overload 1 of 3, '(props: { href: string; } &amp; ListItemButtonBaseProps &amp; Omit&lt;{ action?: Ref&lt;ButtonBaseActions&gt; | undefined; centerRipple?: boolean | undefined; ... 12 more ...; touchRippleRef?: Ref&lt;...&gt; | undefined; }, &quot;classes&quot;&gt; &amp; CommonProps &amp; Omit&lt;...&gt;): Element', gave the following error.
      Type 'ForwardedRef&lt;HTMLElement&gt;' is not assignable to type '((instance: HTMLAnchorElement | null) =&gt; void) | RefObject&lt;HTMLAnchorElement&gt; | null | undefined'.
        Type 'MutableRefObject&lt;HTMLElement | null&gt;' is not assignable to type '((instance: HTMLAnchorElement | null) =&gt; void) | RefObject&lt;HTMLAnchorElement&gt; | null | undefined'.
          Type 'MutableRefObject&lt;HTMLElement | null&gt;' is not assignable to type 'RefObject&lt;HTMLAnchorElement&gt;'.
            Types of property 'current' are incompatible.
              Type 'HTMLElement | null' is not assignable to type 'HTMLAnchorElement | null'.
                Type 'HTMLElement' is missing the following properties from type 'HTMLAnchorElement': charset, coords, download, hreflang, and 21 more.
    Overload 2 of 3, '(props: { component: ElementType&lt;any&gt;; } &amp; ListItemButtonBaseProps &amp; Omit&lt;{ action?: Ref&lt;ButtonBaseActions&gt; | undefined; ... 13 more ...; touchRippleRef?: Ref&lt;...&gt; | undefined; }, &quot;classes&quot;&gt; &amp; CommonProps &amp; Omit&lt;...&gt;): Element', gave the following error.
      Property 'component' is missing in type '{ className?: string | undefined; style?: CSSProperties | undefined; classes?: (Partial&lt;ListItemButtonClasses&gt; &amp; Partial&lt;ClassNameMap&lt;never&gt;&gt;) | undefined; ... 271 more ...; key?: Key | ... 1 more ... | undefined; }' but required in type '{ component: ElementType&lt;any&gt;; }'.
    Overload 3 of 3, '(props: DefaultComponentProps&lt;ExtendButtonBaseTypeMap&lt;ListItemButtonTypeMap&lt;{}, &quot;div&quot;&gt;&gt;&gt;): Element', gave the following error.
      Type 'ForwardedRef&lt;HTMLElement&gt;' is not assignable to type '((instance: HTMLDivElement | null) =&gt; void) | RefObject&lt;HTMLDivElement&gt; | null | undefined'.
        Type 'MutableRefObject&lt;HTMLElement | null&gt;' is not assignable to type '((instance: HTMLDivElement | null) =&gt; void) | RefObject&lt;HTMLDivElement&gt; | null | undefined'.
          Type 'MutableRefObject&lt;HTMLElement | null&gt;' is not assignable to type 'RefObject&lt;HTMLDivElement&gt;'.
            Types of property 'current' are incompatible.
              Type 'HTMLElement | null' is not assignable to type 'HTMLDivElement | null'.
                Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'.ts(2769)
  index.d.ts(824, 46): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes &amp; { href: string; } &amp; ListItemButtonBaseProps &amp; Omit&lt;{ action?: Ref&lt;ButtonBaseActions&gt; | undefined; ... 13 more ...; touchRippleRef?: Ref&lt;...&gt; | undefined; }, &quot;classes&quot;&gt; &amp; CommonProps &amp; Omit&lt;...&gt;'
  OverridableComponent.d.ts(17, 7): 'component' is declared here.
  lib.dom.d.ts(6312, 5): 'align' is declared here.
  index.d.ts(824, 46): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes &amp; ListItemButtonBaseProps &amp; Omit&lt;{ action?: Ref&lt;ButtonBaseActions&gt; | undefined; ... 13 more ...; touchRippleRef?: Ref&lt;...&gt; | undefined; }, &quot;classes&quot;&gt; &amp; CommonProps &amp; Omit&lt;...&gt;'
  </code></pre>
  <p>Possible solution is:</p>
  <pre><code>&lt;MuiListItemButton ref={ref as React.RefObject&lt;HTMLDivElement&gt;}
  </code></pre>
  <p>but I think is a dirty hack. Why does this problem occur and what are the ways to solve it?</p>
  <p><a href="https://codesandbox.io/s/icy-fire-o4dolu?file=/src/App.tsx" rel="nofollow noreferrer">Codesandbox</a></p>