title: MUI async Autocomplete and react-hook-form: Form can't access Autocomplete value
body: <p>I have a multi-step (2) form that uses Material UI and react-hook-form. On the first step, I ask for a string input <strong>(Q1)</strong> and an address <strong>(Q2)</strong>.
  Then, the user clicks next to move onto the second step.</p>
  <p>At this point, I use react context to save the data in a global state and pass its values to step 2 on the form but, only the value of Q1 is saved correctly. Q2's value is saved as <code>undefined</code>.</p>
  <p><strong>Simplified code</strong></p>
  <p>Step 1 page</p>
  <pre><code>//imports here
  const StepOne= () =&gt; {
    const { setValues } = useData();
  
    const methods = useForm({
      mode: &quot;all&quot;,
      shouldUnregister: true
    });
  
    const { handleSubmit, control } = methods;
  
    const history = useHistory();
  
    const onSubmit = async (data) =&gt; {
      setValues({ address: data.address, other: data.other });
      history.push(&quot;/step2&quot;);
    };
  
    return (
      &lt;MainConatiner&gt;
        &lt;Typography variant=&quot;h4&quot; component=&quot;h2&quot; gutterBottom&gt;
          Step one
        &lt;/Typography&gt;
        &lt;FormProvider {...methods}&gt;
          &lt;form noValidate onSubmit={handleSubmit(onSubmit)} autoComplete=&quot;off&quot;&gt;
            &lt;AddressInput label=&quot;Address&quot; name=&quot;address&quot; control={control} /&gt;
            &lt;Input name=&quot;other&quot; label=&quot;Other input&quot; control={control} /&gt;
            &lt;Box mt={2}&gt;
              &lt;Button type=&quot;submit&quot; size=&quot;large&quot; variant=&quot;contained&quot;&gt;
                next
              &lt;/Button&gt;
            &lt;/Box&gt;
          &lt;/form&gt;
        &lt;/FormProvider&gt;
      &lt;/MainConatiner&gt;
    );
  };
  </code></pre>
  <p>Autocomplete compoenent</p>
  <pre><code>const AddressInput = ({ control, name, ...rest }) =&gt; {
    const [value, setValue] = React.useState(null);
    const [inputValue, setInputValue] = React.useState(&quot;&quot;);
    const [options, setOptions] = React.useState([]);
    const fetch = React.useMemo(
      () =&gt;
        throttle((request) =&gt; {
          const getData = getAddress(request?.input);
          getData.then((res) =&gt; {
            setOptions(JSON.parse(res)?.candidates);
            return JSON.parse(res).candidates;
          });
        }, 200),
      []
    );
  
    React.useEffect(() =&gt; {
      let active = true;
      if (inputValue === &quot;&quot;) {
        setOptions(value ? [value] : []);
        return undefined;
      }
  
      fetch({ input: inputValue }, (results) =&gt; {
        if (active) {
          let newOptions = [];
          if (value) {
            newOptions = [value];
          }
          if (results) {
            newOptions = [...newOptions, ...results];
          }
          setOptions(newOptions);
        }
      });
  
      return () =&gt; {
        active = false;
      };
    }, [value, inputValue, fetch]);
  
    return (
      &lt;Controller
        name={name}
        control={control}
        render={({ field }) =&gt; (
          &lt;Autocomplete
            {...field}
            id=&quot;address&quot;
            getOptionLabel={(option) =&gt;
              typeof option === &quot;string&quot; ? option : option.address
            }
            filterOptions={(x) =&gt; x}
            options={options}
            autoComplete
            includeInputInList
            filterSelectedOptions
            value={value}
            onChange={(event, newValue) =&gt; {
              console.log(newValue);
              setOptions(newValue ? [newValue, ...options] : options);
              setValue(newValue);
            }}
            onInputChange={(event, newInputValue) =&gt; {
              setInputValue(newInputValue);
            }}
            renderInput={(params) =&gt; (
              &lt;TextField {...rest} {...params} variant=&quot;outlined&quot; fullWidth /&gt;
            )}
            renderOption={(option) =&gt; &lt;span&gt;{option.address}&lt;/span&gt;}
          /&gt;
        )}
      /&gt;
    );
  };
  </code></pre>
  <p>You can find the full code here: <a href="https://codesandbox.io/s/multi-step-form-4cgj9?file=/src/pages/Home.js:363-1313" rel="nofollow noreferrer">https://codesandbox.io/s/multi-step-form-4cgj9?file=/src/pages/Home.js:363-1313</a></p>
  <p>Any ideas?</p>