title: Yup and useForm validation errors does not trigger when contact is form is empty
body: <p>I am using react-hooks and yup for my contact form. I have added my yup schema as expected and error boundaries but they don't trigger when I try to submit it with empty fields. The empty form goes straight to the database which I don't want. Why is it not triggering?</p>
  <p>My contact form code is as follows:</p>
  <pre><code>import { useForm } from &quot;react-hook-form&quot;;
  import * as yup from &quot;yup&quot;;
  import { yupResolver } from &quot;@hookform/resolvers/yup&quot;;
  import { ErrorMessage } from &quot;@hookform/error-message&quot;;
   
  const schema = yup.object().shape({
    fullName: yup.string().required(&quot;Please enter your full name&quot;),
    email: yup.string().required(&quot;Please enter your email&quot;),
    select: yup
      .string()
      .oneOf([&quot;webSolutions&quot;, &quot;mobileSolutions&quot;, &quot;devOps&quot;, &quot;research&quot;, &quot;uiux&quot;])
      .required(&quot;Please choose one of our services&quot;),
    message: yup.string().required(&quot;Message can not be left blank&quot;),
  });
  
  const Contact = () =&gt; {
    const [fullName, setFullName] = useState(&quot;&quot;);
    const [email, setEmail] = useState(&quot;&quot;);
    const [message, setMessage] = useState(&quot;&quot;);
    const [selecttype , setSelectType ] = useState([]);
  
   
    const {
      formState: { errors },
    } = useForm({
      resolver: yupResolver(schema),
    });
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
      db.collection(&quot;contacts&quot;)
        .add({
          fullName: fullName,
          email: email,
          selecttype : selecttype ,
          message: message,
        })
        .then(() =&gt; {
          alert(&quot;message has been submitted&quot;);
        })
        .catch((error) =&gt; {
          alert(error.message);
        });
    setFullName(&quot;&quot;);
    setEmail(&quot;&quot;);
    setMessage(&quot;&quot;);
    setSelectType(&quot;&quot;);
    };
  
    return (
      &lt;&gt;
        &lt;Container&gt;
          &lt;FormBg&gt;
            &lt;ImageBg&gt;
              &lt;Img src={Image} /&gt;
            &lt;/ImageBg&gt;
          &lt;/FormBg&gt;
          &lt;FormWrap&gt;
            &lt;FormContent&gt;
              &lt;Form onSubmit={handleSubmit}&gt;
                &lt;Icon to=&quot;/&quot;&gt;
                  &lt;img src={dLogo} /&gt;
                &lt;/Icon&gt;
                &lt;FormH1&gt;Fill in your request details below&lt;/FormH1&gt;
                &lt;FormLabel value=&quot;fullName&quot;&gt;
                  Full Name &lt;RequiredTag&gt;*&lt;/RequiredTag&gt;
                &lt;/FormLabel&gt;
                &lt;FormInput
                  type=&quot;text&quot;
                  name=&quot;fullName&quot;
                  onChange={(e) =&gt; setFullName(e.target.value)}
                /&gt;
                &lt;ErrorTag&gt;
                  &lt;ErrorMessage errors={errors} name=&quot;fullName&quot; /&gt;
                &lt;/ErrorTag&gt;
  
                &lt;FormLabel value=&quot;email&quot;&gt;
                  Email &lt;RequiredTag&gt;*&lt;/RequiredTag&gt;
                &lt;/FormLabel&gt;
                &lt;FormInput
                  type=&quot;email&quot;
                  name=&quot;email&quot;
                  placeholder=&quot;example@email.com&quot;
                  onChange={(e) =&gt; setEmail(e.target.value)}
                /&gt;
                &lt;ErrorTag&gt;
                  &lt;ErrorMessage errors={errors} name=&quot;email&quot; /&gt;
                &lt;/ErrorTag&gt;
                &lt;FormLabel value=&quot;services&quot;&gt;
                  What would you wants to do for you?
                  &lt;RequiredTag&gt;*&lt;/RequiredTag&gt;
                &lt;/FormLabel&gt;
                &lt;select
                  onChange={(e) =&gt; {
                    const selectedOption = e.target.value;
                    setSelectType (selectedOption);
                    console.log(selectedOption);
                  }}
                &gt;
                  &lt;option&gt;Select ...&lt;/option&gt;
                  &lt;option value=&quot;webSolutions&quot;&gt;Web Solutions&lt;/option&gt;
                  &lt;option value=&quot;mobileSolutions&quot;&gt;Mobile Solutions&lt;/option&gt;
                  &lt;option value=&quot;devOps&quot;&gt;DevOps Solutions&lt;/option&gt;
                  &lt;option value=&quot;research&quot;&gt;Research Assistance&lt;/option&gt;
                  &lt;option value=&quot;uiux&quot;&gt;UI/UX Design&lt;/option&gt;
                &lt;/select&gt;
              
                &lt;ErrorTag&gt;
                  &lt;ErrorMessage errors={errors} name=&quot;select&quot; /&gt;
                &lt;/ErrorTag&gt;
                &lt;FormLabel value=&quot;message&quot;&gt;
                  Message &lt;RequiredTag&gt;*&lt;/RequiredTag&gt;
                &lt;/FormLabel&gt;
                &lt;textarea
                  name=&quot;message&quot;
                  placeholder=&quot;Tell us more about your request like bugdets, questions and more&quot;
                  onChange={(e) =&gt; setMessage(e.target.value)}
                /&gt;
                &lt;ErrorTag&gt;
                  &lt;ErrorMessage errors={errors} name=&quot;message&quot; /&gt;
                &lt;/ErrorTag&gt;
                &lt;FormButton type=&quot;submit&quot;&gt;Submit Request&lt;/FormButton&gt;
                &lt;Text&gt;We respond within 48 hours&lt;/Text&gt;
              &lt;/Form&gt;
            &lt;/FormContent&gt;
          &lt;/FormWrap&gt;
        &lt;/Container&gt;
      &lt;/&gt;
    );
  };
  
  export default Contact;```
  </code></pre>