title: Cannot assign RefObject<HTMLDivElement> to RefObject<HTMLElement> instance
body: <p>In a React component I want to keep a reference to a child node which can differ in type (div, img etc.). So I defined a member variable:</p>
  
  <pre><code>export class MyComp extends Component&lt;IProperties, IState&gt; {
  
      private triggerRef = React.createRef&lt;HTMLElement&gt;();
  
  ...
  }
  
  </code></pre>
  
  <p>and want to use that to hold the required ref:</p>
  
  <pre><code>    const trigger = &lt;div ref={this.triggerRef} className={className} style={style} /&gt;;
  </code></pre>
  
  <p>Though, this produces an error:</p>
  
  <pre><code>Type 'RefObject&lt;HTMLElement&gt;' is not assignable to type 'string | ((instance: HTMLDivElement | null) =&gt; void) | RefObject&lt;HTMLDivElement&gt; | null | undefined'.
    Type 'RefObject&lt;HTMLElement&gt;' is not assignable to type 'RefObject&lt;HTMLDivElement&gt;'.
      Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'.ts(2322)
  lib.dom.d.ts(6708, 5): 'align' is declared here.
  index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;'
  </code></pre>
  
  <p>The line <code>Type 'RefObject&lt;HTMLElement&gt;' is not assignable to type 'RefObject&lt;HTMLDivElement&gt;'</code> says the two ref object types are incompatible, even though <code>HTMLDivElement</code> extends <code>HTMLElement</code>. I'd expect that the ref types are assignment compatible as they clearly have an overlap.</p>
  
  <p>What is the correct approach here, without changing the member variable to use <code>HTMLDivElement</code>?</p>