title: react-hook-form: Validation not working when using onBlur mode
body: <p>I am trying to display an error with <code>yup</code> and <code>react-hook-form</code> when the user selects more than 5 checkboxes without success.</p>
  <p>Instead, the error is shown when the seventh checkbox is selected.</p>
  <p>Here is the simplified code:</p>
  <pre><code>imports...
  
  const schema = yup.object().shape({
    option: yup.array().max(5)
  });
  function App() {
    const { register, handleSubmit, errors } = useForm({
      mode: &quot;onBlur&quot;,
      resolver: yupResolver(schema)
    });
  
    const [state, setState] = useState({
      wasSubmitted: false
    });
  
    const submit = async (data) =&gt; {
      window.alert(JSON.stringify(data));
    };
  
    if (state.wasSubmitted) {
      return &lt;p&gt;Congrats&lt;/p&gt;;
    } else {
      return (
        &lt;&gt;
          &lt;CssBaseline /&gt;
          &lt;Container maxWidth=&quot;sm&quot;&gt;
            &lt;Typography variant=&quot;h2&quot; component=&quot;h1&quot;&gt;
              My form
            &lt;/Typography&gt;
            &lt;form noValidate autoComplete=&quot;off&quot; onSubmit={handleSubmit(submit)}&gt;
              &lt;FormControl
                component=&quot;fieldset&quot;
                error={!!errors.option}
              &gt;
                &lt;FormLabel component=&quot;legend&quot;&gt;
                  Please select the category or categories of books the child is
                  interested in:
                &lt;/FormLabel&gt;
                &lt;FormGroup&gt;
                  &lt;FormControlLabel
                    control={&lt;Checkbox name=&quot;option&quot; inputRef={register} /&gt;}
                    value=&quot;Option1&quot;
                    label=&quot;Option 1&quot;
                  /&gt;
                  &lt;FormControlLabel
                    control={&lt;Checkbox name=&quot;option&quot; inputRef={register} /&gt;}
                    value=&quot;Option2&quot;
                    label=&quot;Option 2&quot;
                  /&gt;
                  &lt;FormControlLabel
                    control={&lt;Checkbox name=&quot;option&quot; inputRef={register} /&gt;}
                    label=&quot;Option3&quot;
                    value=&quot;Option 3&quot;
                  /&gt;
                  &lt;FormControlLabel
                    control={&lt;Checkbox name=&quot;option&quot; inputRef={register} /&gt;}
                    value=&quot;Option4&quot;
                    label=&quot;Option 4&quot;
                  /&gt;
                  &lt;FormControlLabel
                    control={&lt;Checkbox name=&quot;option&quot; inputRef={register} /&gt;}
                    value=&quot;Option5&quot;
                    label=&quot;Option 5&quot;
                  /&gt;
                  &lt;FormControlLabel
                    control={&lt;Checkbox name=&quot;option&quot; inputRef={register} /&gt;}
                    value=&quot;Option6&quot;
                    label=&quot;Option 6&quot;
                  /&gt;
                  &lt;FormControlLabel
                    control={&lt;Checkbox name=&quot;option&quot; inputRef={register} /&gt;}
                    value=&quot;Option7&quot;
                    label=&quot;Option 7&quot;
                  /&gt;
                  &lt;FormControlLabel
                    control={&lt;Checkbox name=&quot;option&quot; inputRef={register} /&gt;}
                    value=&quot;Option8&quot;
                    label=&quot;Option 8&quot;
                  /&gt;
                  &lt;FormControlLabel
                &lt;FormHelperText&gt;Up to five categories&lt;/FormHelperText&gt;
              &lt;/FormControl&gt;
  
              &lt;Button
                type=&quot;submit&quot;
                disableElevation
              &gt;
                Submit
              &lt;/Button&gt;
            &lt;/form&gt;
          &lt;/Container&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default App;
  
  </code></pre>
  <p>You can also find the project's sandbox here:</p>
  <p><a href="https://codesandbox.io/s/elated-bell-3yye6?file=/src/App.js" rel="noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit modern-resonance-d7mpc" /></a></p>
  <p>Any ideas?</p>