title: FormControl Label is crossed by Outline border in Material UI - ReactJs
body: <p>I am using Material UI and have provided form validation with react-hook-form.
  The problem is that in an outline formcontrol, the label is crossed by the outline border.</p>
  <p>Example:
  <a href="https://i.stack.imgur.com/ZTEnJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZTEnJ.jpg" alt="enter image description here" /></a></p>
  <p>The Zipcode label is working fine but the Appliances Label is crossed out by the outline border.</p>
  <p>Here is the code:</p>
  <pre><code>&lt;Grid item xs={12} sm={6}&gt;
                  &lt;TextField
                    variant=&quot;outlined&quot;
                    placeholder=&quot;Enter The Zip Code&quot;
                    required={true}
                    label=&quot;Zip Code&quot;
                    fullWidth
                    name=&quot;zipcode&quot;
                    inputRef={register({
                      required: &quot;Zip Code is Required.&quot;,
                    })}
                    error={Boolean(errors.zipcode)}
                    helperText={errors.zipcode?.message}
                  /&gt;
  &lt;/Grid&gt;
  &lt;Grid item xs={12} sm={6}&gt;
       &lt;FormControl 
                    variant=&quot;outlined&quot;
                    key=&quot;Appliances&quot;
                    error={Boolean(errors.appliance)}
                    fullWidth &gt;
                      &lt;InputLabel required={true} id=&quot;demo-simple-select-outlined-label&quot; &gt;Appliances&lt;/InputLabel&gt;
                      &lt;Controller
                      render={(props) =&gt; (
                        &lt;Select size=&quot;large&quot; value={props.value} onChange={props.onChange}&gt;
                            &lt;MenuItem value=&quot;&quot; disabled&gt;Choose your Appliance&lt;/MenuItem&gt;
                            &lt;MenuItem value={'Refrigerator'}&gt;Refrigerator&lt;/MenuItem&gt;
                            &lt;MenuItem value={'Freezer'}&gt;Freezer&lt;/MenuItem&gt;
                            &lt;MenuItem value={'Ice Maker'}&gt;Ice Maker&lt;/MenuItem&gt;
                            &lt;MenuItem value={'Range'}&gt;Range&lt;/MenuItem&gt;
                            &lt;MenuItem value={'Cooktop'}&gt;Cooktop &lt;/MenuItem&gt;
                            &lt;MenuItem value={'Oven'}&gt;Oven &lt;/MenuItem&gt;
                            &lt;MenuItem value={'Microwave'}&gt;Microwave&lt;/MenuItem&gt;
                            &lt;MenuItem value={'Washing Machine'}&gt;Washing Machine&lt;/MenuItem&gt;
                            &lt;MenuItem value={'Clothes Dryer'}&gt;Clothes Dryer&lt;/MenuItem&gt;
                            &lt;MenuItem value={'Dishwasher'}&gt;Dishwasher&lt;/MenuItem&gt;
                            &lt;MenuItem value={'Garbage Disposal'}&gt;Garbage Disposal&lt;/MenuItem&gt;  
                            &lt;MenuItem value={'Trash Compactor'}&gt;Trash Compactor&lt;/MenuItem&gt;
                        &lt;/Select&gt;
                       )}
                      name=&quot;appliance&quot;
                      control={control}
                      defaultValue=&quot;&quot;
                      rules={{
                        required: &quot;Please Choose Your Appliance.&quot;,
                      }}
              /&gt;
              &lt;FormHelperText&gt;{errors.appliance?.message}&lt;/FormHelperText&gt;
        &lt;/FormControl&gt;
  &lt;/Grid&gt;
  </code></pre>
  <p>Can someone help me figure this out? I found a solution in react class components but since I do not work with class components, I am not sure how to work this out?</p>