title: React Material UI Label Overlaps with Text
body: <p>I'm using Material UI in a React application and trying to implement an entity update page. In this, we would need to set the exiting values of the entity to let the user update them. The existing values have been set using the defaultValue attribute of the input fields:</p>
  
  <pre><code>&lt;div className="input-field"&gt;
     &lt;input type="text" name="name" ref="name" defaultValue={this.state.name} /&gt;
     &lt;label htmlFor="name" &gt;Name&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With this approach, the intended functionality works fine. However, the labels of all text fields overlaps with their values. Please see below screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/Pt8PK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Pt8PK.png" alt="enter image description here"></a></p>
  
  <p>If I click on each field, the label moves up as expected. However, at the page load, labels do not move up. I tried using the value attribute of the input fields together with the onChange() event handler but experienced the same problem. Really, appreciate your thoughts on this.</p>
  
  <p>The complete source code of this application can be found here:
  <a href="https://github.com/imesh/react-examples/tree/master/meetups/meetups-web-client" rel="noreferrer">https://github.com/imesh/react-examples/tree/master/meetups/meetups-web-client</a></p>
  
  <p>This particular page can be found here: 
  <a href="https://github.com/imesh/react-examples/blob/master/meetups/meetups-web-client/src/components/UpdateMeetup.js" rel="noreferrer">https://github.com/imesh/react-examples/blob/master/meetups/meetups-web-client/src/components/UpdateMeetup.js</a></p>
  
  <p>Github Issue: <a href="https://github.com/Dogfalo/materialize/issues/5995" rel="noreferrer">https://github.com/Dogfalo/materialize/issues/5995</a></p>