title: React Bootstrap can't validate forms
body: <p>I am trying to add some validation to my React + Bootstrap project but I am not able to achieve this. According to <a href="https://react-bootstrap.github.io/components/forms/#forms-validation" rel="nofollow noreferrer">Bootstrap Form validation documentation</a> I have to provide a <code>Form.Control.Feedback</code> component to the Form Group component.</p>
  
  <p>But is not showing the errors but check marks like everything is fine. I created this Code Sandbox yo demostrate what I need to achieve and what is showing me:</p>
  
  <p><a href="https://codesandbox.io/s/magical-mcclintock-rnthy?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit magical-mcclintock-rnthy"></a></p>
  
  <p>And just in case, this is the code if you don't need the sandbox to see the error:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from "react";
  import "./styles.css";
  import { Container, Form, Button } from "react-bootstrap";
  import validator from "validator";
  import empty from "is-empty";
  
  export default function App() {
    const [validated, setValidated] = useState(false);
    const [errors, setErrors] = useState({});
    const [phone, setPhone] = useState("");
    const [email, setEmail] = useState("");
  
    const handleSubmit = async e =&gt; {
      e.preventDefault();
  
      const errors = {};
  
      // validation
      if (!validator.isMobilePhone(phone, ["es-UY"])) {
        errors.phone = "Invalid phone number";
      }
  
      if (!validator.isEmail(email)) {
        errors.email = "Invalid email address";
      }
  
      if (!empty(errors)) {
        setErrors(errors);
      }
  
      setValidated(true);
    };
  
    return (
      &lt;Container&gt;
        &lt;Form validated={validated} onSubmit={handleSubmit}&gt;
          &lt;h1&gt;Test form&lt;/h1&gt;
          &lt;Form.Group controlId="phone"&gt;
            &lt;Form.Label&gt;Phone number&lt;/Form.Label&gt;
            &lt;Form.Control
              type="tel"
              value={phone}
              onChange={e =&gt; setPhone(e.target.value)}
            /&gt;
            &lt;Form.Control.Feedback type="invalid"&gt;Error&lt;/Form.Control.Feedback&gt;
            {errors.phone &amp;&amp; (
              &lt;Form.Control.Feedback type="invalid"&gt;
                {errors.phone}
              &lt;/Form.Control.Feedback&gt;
            )}
          &lt;/Form.Group&gt;
          &lt;Form.Group controlId="email"&gt;
            &lt;Form.Label&gt;Email address&lt;/Form.Label&gt;
            &lt;Form.Control
              type="email"
              value={email}
              onChange={e =&gt; setEmail(e.target.value)}
              feedback="Error"
            /&gt;
            {errors.email &amp;&amp; (
              &lt;Form.Control.Feedback type="invalid"&gt;
                {errors.email}
              &lt;/Form.Control.Feedback&gt;
            )}
          &lt;/Form.Group&gt;
          &lt;Form.Group controld="submit"&gt;
            &lt;Button type="submit" variant="primary"&gt;
              Submit
            &lt;/Button&gt;
            &lt;Button
              type="reset"
              variant="info"
              style={{ marginLeft: 10 }}
              onClick={() =&gt; {
                setErrors({});
                setValidated(false);
              }}
            &gt;
              Reset
            &lt;/Button&gt;
          &lt;/Form.Group&gt;
        &lt;/Form&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>
  
  <p>So, what am I doing wrong?</p>