title: How to trigger re-render with `setValue` using react-hook-form?
body: <p>I have a simple form with a select field, it's <a href="https://react-hook-form.com/" rel="nofollow noreferrer">react-hook-form</a> for validation and everything. There's a <code>Controller</code> which renders a Material UI <code>Select</code>. I would like to set the value of such select using <a href="https://react-hook-form.com/api/useform/setvalue" rel="nofollow noreferrer">setValue</a> from outside the component (in the root of the form, where all controls reside).<br>
  This is the piece of code I'm using (slightly simplified not to waste too much of your time)</p>
  <pre><code>type Props = {
    name: string;
    control: Control&lt;any&gt;;
    options: SelectOptions[];
  };
  const Select: FunctionComponent&lt;Props&gt; = ({
    name,
    control,
    options,
  }) =&gt; (
    &lt;Controller
      control={control}
      name={name}
      render={({ field: { onChange, value } }) =&gt; {
        return (
          &lt;FormControl&gt;
            &lt;MuiSelect onChange={onChange}&gt;
              {options.map((o) =&gt; (
                &lt;MuiSelectItem key={o.key} value={o.value}&gt;{o.label}&lt;/MuiSelectItem&gt;
              ))}
            &lt;/MuiSelect&gt;
          &lt;/FormControl&gt;
        )
      }}
    /&gt;
  );
  </code></pre>
  <p>As far as changing the value of the select, <code>setValue</code> works magically. When I feed a new value, it works as intended. The problem (I guess) is the component is not re-rendered, so the old value is still shown. I'm not sure how to fix this thing and docs did not help a lot. Any help is much appreciated, thanks!</p>