title: React.ForwardRef TypeScript Component Type Error
body: <p>I have a <code>Block</code> component which will render a <code>div</code> or <code>a</code> tag based on a prop value. I want to pass a ref from the parent component to this component. Therefore, I need to use <code>RefForwardingComponent</code> type for my component variable type, but I get an error for type incompatibility between <code>HTMLAnchorElement</code> and <code>HTMLDivElement</code>. How can I fix it? <a href="https://codesandbox.io/s/async-wildflower-lzhu7?fontsize=14&amp;hidenavigation=1&amp;module=%2Fsrc%2FBlock.tsx&amp;theme=dark" rel="nofollow noreferrer">here's the component code on CodeSandBox</a>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import * as React from "react";
  
  interface Props {
    isLink: boolean;
  }
  
  type PropsWithElementProps&lt;T&gt; = React.HTMLProps&lt;T&gt; &amp; Props;
  
  type RefComponent&lt;T, U&gt; =
    | React.RefForwardingComponent&lt;T, PropsWithElementProps&lt;T&gt;&gt;
    | React.RefForwardingComponent&lt;U, PropsWithElementProps&lt;U&gt;&gt;;
  
  // error for Block variable type... full error on CodeSandBox link
  const Block: RefComponent&lt;HTMLAnchorElement, HTMLDivElement&gt; = React.forwardRef(
    ({ isLink }, ref) =&gt; {
      if (isLink)
        return (
          &lt;a ref={ref} href="#nothing"&gt;
            I'm a link!
          &lt;/a&gt;
        );
      else return &lt;div ref={ref}&gt;I'm a div!&lt;/div&gt;;
    }
  );
  
  export default Block;
  
  </code></pre>