title: React Material UI Autocomplete using React Hook Forms issue
body: <p>I am having issues with React Hook Forms with Material UI Components and I can't really find resources on this. I have a page where I fetch the countries and the current profile information and I want to show it inside the form. Initially I want to set the country to Germany.</p>
  <pre><code>const [countries, setCountries] = useState([]);
  const { control, handleSubmit, register, reset } = useForm();
  const [currentProfile, setCurrentProfile] = useState&lt;profiles.resProfileFields&gt;();
  
  useEffect(() =&gt; {
    const getProfileData = async () =&gt; {
      try {
        const profile = await api.get(profiles.getById, { id: profileId });
        if (profile != null &amp;&amp; profile != undefined) {
          setCurrentProfile(profile);
          setcountryId(profile.country.id);
        }
  
      } catch (err) {
        console.log(`error getting: ${err}`);
      }
    };
    getProfileData();
    getCountries();
  }, [profileId]);
  
  
  useEffect(() =&gt; {
    reset(currentProfile);
  }, [currentProfile]);
  
  const getCountries = () =&gt; {
    api
      .get(routes.countries.list, {})
      .then(res =&gt; {
        setCountries(res);
      })
      .catch(err =&gt; { });
  };
  
  &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
  
  
    &lt;TextField
      inputRef={register}
      name=&quot;name&quot;
      label=&quot;* Name&quot;
      InputLabelProps={{
        shrink: true
      }}
      variant=&quot;outlined&quot;
      placeholder=&quot;Name&quot;
      className=&quot;form-item-full&quot;
    /&gt;
  
    &lt;Controller
      name=&quot;country&quot;
      as={
        &lt;Autocomplete
          className=&quot;form-item&quot;
          options={countries}
          getOptionLabel={option =&gt; option.name}
          renderInput={params =&gt; (
            &lt;TextField
              {...params}
              inputRef={register}
              label=&quot;Country&quot;
              placeholder=&quot;Select a Country&quot;
              InputLabelProps={{
                shrink: true
              }}
              variant=&quot;outlined&quot;
            /&gt;
          )}
        /&gt;
      }
      defaultValue=&quot;Germany&quot;
      control={control}
    /&gt;
  &lt;/form&gt;
  </code></pre>
  <ol>
  <li>How can I initially set/reset the value to Germany?</li>
  <li>How can I post the Id of the country when I submit?</li>
  </ol>