title: How to focus when an error occurs in react-hook-form Controller?
body: <p>I am rendering a custom component using the <code>Controller</code> of react-hook-form.</p>
  <p>If an error occurs when using <code>register</code>, focus is normal, but the Controller does not.</p>
  <p>I was able to find a way to handle an error when the Custom Component processes only a single input, but I couldn't find a way to handle it when it has multiple inputs.</p>
  <p>Form.js</p>
  <pre><code>import { Controller, useForm } from &quot;react-hook-form&quot;;
  import CustomInput from &quot;./CustomInput&quot;;
  import * as yup from &quot;yup&quot;;
  
  const schema = yup.object({
    name: yup.object().shape({
      first: yup.string().required(),
      last: yup.string().required(),
    }),
  });
  function Form() {
    const {
      handleSubmit,
      control,
      formState: { errors },
    } = useForm({
      defaultValues: { name: { first: &quot;&quot;, last: &quot;&quot; } },
      resolver: yupResolver(schema),
    });
  
    const onSubmit = (data) =&gt; console.log(data);
  
    return (
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        &lt;Controller
          name=&quot;name&quot;
          control={control}
          rules={{ required: true }}
          render={({ field }) =&gt; (
            &lt;CustomInput
              value={field.value}
              onChange={(value) =&gt; field.onChange(value)}
              errors={errors}
            /&gt;
          )}
        /&gt;
        &lt;button type=&quot;submit&quot;&gt;Send&lt;/button&gt;
      &lt;/form&gt;
    );
  }
  
  export default Form;
  </code></pre>
  <p>CustomInput.js</p>
  <pre><code>function CustomInput({ value, onChange, errors }) {
    const changeFirst = (e) =&gt; {
      onChange({ first: e.target.value, last: value?.last });
    };
  
    const changeLast = (e) =&gt; {
      onChange({ first: value?.first, last: e.target.value });
    };
  
    return (
      &lt;div&gt;
        &lt;input type=&quot;text&quot; value={value.first} onChange={changeFirst} /&gt;
        &lt;input type=&quot;text&quot; value={value.last} onChange={changeLast} /&gt;
        {errors?.name &amp;&amp; (
          &lt;p className=&quot;errmsg&quot;&gt;
            {errors?.name?.first?.message || errors?.name?.last?.message}
          &lt;/p&gt;
        )}
      &lt;/div&gt;
    );
  }
  
  export default CustomInput;
  </code></pre>
  <p>​How can I get error focus when there are multiple inputs in a custom component?</p>