title: React - useRef with TypeScript and functional component
body: <p>I'm trying to call the child component method from the parent component using <code>useRef</code>.</p>
  <p>In the future, the <code>SayHi</code> method will update the hook state in the child component. Unfortunately, I have bugs I can't deal with.</p>
  <p>Line: <code>ref.current.SayHi();</code></p>
  <blockquote>
  <p>Property 'SayHi' does not exist on type 'ForwardRefExoticComponent&lt;{ name: string; } &amp; RefAttributes&lt;{ SayHi: () =&gt; void; }&gt;&gt;'.</p>
  </blockquote>
  <p>Line: <code>&lt;Child name=&quot;Adam&quot; ref={ref}/&gt;</code></p>
  <blockquote>
  <p>Type 'RefObject&lt;ForwardRefExoticComponent&lt;{ name: string; } &amp; RefAttributes&lt;{ SayHi: () =&gt; void; }&gt;&gt;&gt;' is not assignable to type '((instance: { SayHi: () =&gt; void; } | null) =&gt; void) | RefObject&lt;{ SayHi: () =&gt; void; }&gt; | null | undefined'.
  Type 'RefObject&lt;ForwardRefExoticComponent&lt;{ name: string; } &amp; RefAttributes&lt;{ SayHi: () =&gt; void; }&gt;&gt;&gt;' is not assignable to type 'RefObject&lt;{ SayHi: () =&gt; void; }&gt;'.
  Property 'SayHi' is missing in type 'ForwardRefExoticComponent&lt;{ name: string; } &amp; RefAttributes&lt;{ SayHi: () =&gt; void; }&gt;&gt;' but required in type '{ SayHi: () =&gt; void; }'.</p>
  </blockquote>
  <p>Full <code>test.tsx</code> file:</p>
  <pre><code>import React, { useRef, forwardRef, useImperativeHandle, Ref } from 'react'
  
  const Parent = () =&gt; {
    const ref = useRef&lt;typeof Child&gt;(null);
    const onButtonClick = () =&gt; {
      if (ref.current) {
        ref.current.SayHi();
      }
    };
    return (
      &lt;div&gt;
        &lt;Child name=&quot;Adam&quot; ref={ref}/&gt;
        &lt;button onClick={onButtonClick}&gt;Log console&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  const Child = forwardRef((props: {name: string}, ref: Ref&lt;{SayHi: () =&gt; void}&gt;)=&gt; {
    const {name} = props;
    useImperativeHandle(ref, () =&gt; ({ SayHi }));
    
    function SayHi() { console.log(&quot;Hello &quot; + name); }
    
    return &lt;div&gt;{name}&lt;/div&gt;;
  });
  </code></pre>
  <p>I deeply ask for help on this topic.</p>