title: react-hook-form Controller issues
body: <p>Hi im trying to do one form with react-hook-form and material-ui. I don't want to write Controller every time for all TextFields. Because of that i declare it in another file and call it in my form but its not working i didn't understand why, because in some videos that i watched is working. What is the problem and how i can fix it ?</p>
  <p><strong>Form Field</strong></p>
  <pre><code>import React from 'react'
  import { TextField, Grid } from '@material-ui/core'
  import { useForm, Controller, useFormContext  } from 'react-hook-form'
  
  const FormField = ({name, label}) =&gt; {
  const { control } = useForm()
  
  return (
      &lt;Grid item xs={12} sm={6} &gt;
          &lt;Controller 
              render = {({field}) =&gt; 
              &lt;TextField 
                  {...field}        
                  label={label} required
              /&gt;}
              name={name}
              control = {control}
              defaultValue=&quot;&quot;
          /&gt;
      &lt;/Grid&gt;
  )
  }
  
  
  export default FormField
  </code></pre>
  <p><strong>Adress Form</strong></p>
  <pre><code>import React from 'react'
  import { InputLabel, Select, MenuItem, Button, Grid, Typography, TextField } from '@material-ui/core'
  import { useForm, FormProvider, Controller } from 'react-hook-form'
  import FormField from './FormField'
  import { Link } from 'react-router-dom'
  
  const AdressForm = ({next}) =&gt; {
  const {handleSubmit, control} = useForm()
  return (
      &lt;&gt;
          &lt;Typography variant=&quot;h6&quot; gutterBottom&gt;Shipping Address &lt;/Typography&gt;
          
              &lt;form onSubmit={handleSubmit((data) =&gt; console.log(data) )}&gt;
                  &lt;Grid container spacing={3}&gt;
                      &lt;FormField name='firstName' label='First Name' required='required'/&gt;
                      &lt;FormField name='lastName' label='Last Name' /&gt;
                      &lt;FormField name='email' label='Email' /&gt;
                      &lt;FormField name='phoneNumber' label='Phone Number' /&gt;
                  &lt;/Grid&gt;
                  &lt;br/&gt;
                  &lt;div style={{ display: 'flex', justifyContent: 'space-between'}}&gt;
                       &lt;Button component={Link} to=&quot;/cart&quot; variant=&quot;outlined&quot;&gt;Back to Cart&lt;/Button&gt;
                       &lt;Button type=&quot;submit&quot; variant=&quot;contained&quot; color=&quot;primary&quot;&gt;Next&lt;/Button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          
      &lt;/&gt;
  )
  }
  
  export default AdressForm
  </code></pre>