title: material-ui v4.0.1 warning "Expected an element that can hold a ref"
body: <p>I upgraded to material-ui v4.0.1 and I see that Modals now require a forwarded ref. I'm having some trouble implementing a fix for this using class components and Dialogs.</p>
  
  <p>I tried using <code>React.createRef()</code> as well as <code>React.forwardRef((props, ref) =&gt; (...)</code> in a few places but I can't figure out how to resolve this warning.</p>
  
  <p>In my parent component I render a custom component</p>
  
  <pre><code>&lt;ApolloFormDialog /&gt;
  </code></pre>
  
  <p>In <code>ApolloFormDialog</code> I render essentially:</p>
  
  <pre><code>&lt;Dialog ...&gt;
    {title}
    {subtitle}
    {form}
  &lt;/Dialog&gt;
  </code></pre>
  
  <hr>
  
  <p>The full warning is <code>Warning: Failed prop type: Invalid prop 'children' supplied to 'Modal'. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead?</code></p>
  
  <p>However I am using class components currently. Migrating to use function components is not an option right now as my app is rather large.</p>
  
  <hr>
  
  <p>I have tried adding a ref to <code>ApolloFormDialog</code> as</p>
  
  <pre><code>&lt;ApolloFormDialog ref={React.createRef()} /&gt;
  </code></pre>
  
  <p>as well as wrapping <code>ApolloFormDialog</code>'s class with:</p>
  
  <pre><code>export default React.forwardRef((props, ref) =&gt; &lt;ApolloFormDialog ref={ref} {...props}/&gt;)
  </code></pre>
  
  <p>and then adding that <code>ref</code> to the dialog as</p>
  
  <pre><code>&lt;Dialog ref={this.props.ref} /&gt;
  </code></pre>
  
  <p>but the warning still persists, and I'm not sure where to go from here.</p>