title: Use assignable type for RefObject in React with Typescript
body: <p>I am using React with Typescript and Material UI. I want to pass a ref as a props. In WidgetDialog I have </p>
  
  <pre><code>export interface WidgetDialogProps {
     ....
      ref?: React.RefObject&lt;HTMLDivElement&gt;;
  }
  
  ....
  
  &lt;div data-id={dataId} className={classes.dialog} ref={ref}&gt;
         --- dialog content ---          
  &lt;/div&gt;
  </code></pre>
  
  <p>And when I want to use it in other component :</p>
  
  <pre><code> const canvasRef = React.useRef&lt;HTMLDivElement&gt;(null);
  
   &lt;WidgetDialog
       ref={canvasRef}
       ....
    &gt;
  ....
  &lt;/WidgetDialog&gt;
  </code></pre>
  
  <p>I am geting this type error:</p>
  
  <pre><code>Type 'RefObject&lt;HTMLDivElement&gt;' is not assignable to type '(string &amp; RefObject&lt;HTMLDivElement&gt;) | (((instance: Component&lt;WidgetDialogProps, any, any&gt; | null) =&gt; void) &amp; RefObject&lt;...&gt;) | (RefObject&lt;...&gt; &amp; RefObject&lt;...&gt;) | undefined'.
    Type 'RefObject&lt;HTMLDivElement&gt;' is not assignable to type 'RefObject&lt;Component&lt;WidgetDialogProps, any, any&gt;&gt; &amp; RefObject&lt;HTMLDivElement&gt;'.
      Type 'RefObject&lt;HTMLDivElement&gt;' is not assignable to type 'RefObject&lt;Component&lt;WidgetDialogProps, any, any&gt;&gt;'.
        Type 'HTMLDivElement' is missing the following properties from type 'Component&lt;WidgetDialogProps, any, any&gt;': context, setState, forceUpdate, render, and 3 more.ts(2322)
  index.d.ts(107, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Component&lt;WidgetDialogProps, any, any&gt;&gt; &amp; Readonly&lt;...&gt; &amp; Readonly&lt;...&gt;'
  </code></pre>
  
  <p>What is the correct type for ref in interface?</p>