title: Material-UI TextField Outline Label is overlapping with border when conditionally rendered
body: <p><a href="https://codesandbox.io/s/material-demo-04y5b" rel="nofollow noreferrer">https://codesandbox.io/s/material-demo-04y5b</a></p>
  
  <p>Steps to reproduce:</p>
  
  <ul>
  <li>Click "confirm" or "have a code?" to trigger a conditional render of a different form. </li>
  <li>Click the "Confirmation Code" <code>TextField</code>.</li>
  <li><p>Notice the border has rendered incorrectly and is causing the label to overlap with the border.</p></li>
  <li><p>For correct behavior initialize newUser with a value other than Null and see that the border has rendered correctly to accommodate the label. </p></li>
  </ul>
  
  <p>Any idea why this is happening?</p>