title: How to use Flow with React.createRef()?
body: <p>Since React 16.3 it is possible to use <a href="https://reactjs.org/docs/refs-and-the-dom.html" rel="noreferrer"><code>React.createRef()</code></a> to access a DOM element. I am also using <a href="https://flow.org/en/" rel="noreferrer">Flow</a> in my project, but the <a href="https://flow.org/en/docs/react/refs/" rel="noreferrer">documentation still uses the old way</a>.</p>
  
  <p>The below code unfortunately fails:</p>
  
  <pre class="lang-js prettyprint-override"><code>/* @flow */
  import * as React from 'react';
  
  export class TestComponent extends React.Component&lt;{}&gt; {
    myRef: React.Ref&lt;HTMLDivElement&gt;
  
    constructor(props: any) {
      super(props)
      this.myRef = React.createRef()
    }
  
    render() {
      return (
        &lt;div ref={this.myRef} /&gt;
      )
    }
  }
  </code></pre>
  
  <p>with the following error:</p>
  
  <pre><code>Cannot instantiate `Ref` because in type argument `ElementType`:
   - Either a callable signature is missing in `HTMLDivElement` [1] but exists in
     `React.StatelessFunctionalComponent` [2].
   - Or `HTMLDivElement` [1] is incompatible with statics of `React.Component` [3].
  </code></pre>
  
  <p>How do I type it correctly?</p>