title: Declaring a reusable interface for React functional components with forward ref
body: <p>I am trying to make a reusable <code>interface</code> for my own components:</p>
  <pre><code>// common.types.ts
  
  export interface FCWithForwardedRef&lt;P = {}, R = null&gt; {
   (props: P, ref: Ref&lt;R&gt;): ReactElement | null;
  }
  </code></pre>
  <p>I have a <code>Button</code> component with a <code>props</code> interface roughly like this</p>
  <pre><code>    export interface ButtonProps extends ButtonHTMLAttributes&lt;HTMLButtonElement&gt; {
        size?: 'sm' | 'md' | 'lg';
        icon?: ELementType | null;
        ...
      }
  
  // Button.tsx
  
  const Button: FCWithForwardedRef&lt;ButtonProps, HTMLButtonElement&gt; = ({
    children, &lt;-- this gets autocomplete
  }, ref) =&gt; {
    return &lt;button&gt;{children}&lt;/button&gt;
  </code></pre>
  <p>When I use the <code>Button</code> component, I get the following error:</p>
  <pre><code>&lt;Button&gt;Click&lt;/ Button&gt;
  </code></pre>
  <p><code>Type '{ children: string; ref: MutableRefObject&lt;undefined&gt;; }' is not assignable to type 'IntrinsicAttributes &amp; RefAttributes&lt;unknown&gt;'. Property 'children' does not exist on type 'IntrinsicAttributes &amp; RefAttributes&lt;unknown&gt;'</code></p>
  <p>Despite of this I get autocompletion for the <code>children</code> prop when destructuring <code>props</code> in my Button component</p>
  <p>Can you please point me to my mistake? Or what is the best way to do this?</p>