title: Material ui Textfield Hinttext overlap with with text when text is set with setState in react
body: <p>I am trying to autofill textfield using setState when user click on edit button. Text is set but default hintText and floatingLabelText overlap with text. When i click inside textfield lable go up but hintText overlap with text. How can i solve this?</p>
  
  <p>this is textfield overlap image.</p>
  
  <p><a href="https://i.stack.imgur.com/8MYLQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8MYLQ.png" alt="enter image description here"></a></p>
  
  <p>this is button</p>
  
  <pre><code>&lt;button type="button" className="btn btn-primary btn-sm" id="edit"
  onClick={this.editProduct.bind(this, product)} value="edit"&gt;Edit&lt;/button&gt;
  </code></pre>
  
  <p>when user click on edit button editProduct function setState is set like this </p>
  
  <pre><code>editProduct = product =&gt; {
      this.setState({ 
          name: product.name,
          brand: product.brand,
          description: product.description, 
       });   
  }
  
  render() {
  const {  name, brand, description } = this.state;
  const values = { name, brand, description };
  
  return ( 
      &lt;div class="container"&gt;   
          &lt;Addproduct
          handleChange={this.handleChange}
          values={values}
          /&gt;
    )
  }
  </code></pre>
  
  <p>this is textfield inside Addproduct component</p>
  
  <pre><code>&lt;TextField
  hintText="Enter Your Product Name"
  floatingLabelText="Product Name"
  onChange={handleChange('name')}
  errorText={values.nameError}
  defaultValue={values.name}
  fullWidth
  /&gt;
  </code></pre>