title: React Bootstrap Forms: <Form.Control.Feedback></Form.Control.Feedback> is not displaying when validated is false
body: <p><strong>Issue:</strong></p>
  <p>I'm implementing a form and having a really hard time understanding why the React Bootstrap: <code>&lt;Form.Control.Feedback&gt;&lt;/Form.Control.Feedback&gt;</code> is not displaying when validated is false</p>
  <p><strong>Steps To Reproduce:</strong></p>
  <ol>
  <li>When the user clicks the <code>Send Verification Code</code> button, <code>type={'submit'}</code> a prop on the button and is triggered.</li>
  <li><code>onClick={(event) =&gt; sendVerificationCode(event)}</code> passes the event, where I use <code>event.preventDefault()</code> and <code>event.stopPropagation();</code> to stop cancel the event.</li>
  <li>With nothing entered in the field, the <code>sendVerificationCode</code> function correctly works and only logs <code>console.log('DO NOTHING');</code> and <code>console.log(validated);</code> for testing.</li>
  <li><code>validated</code> is working and is false, but why isn't the &lt;Form.Control.Feedback&gt;&lt;/Form.Control.Feedback&gt; not displaying.</li>
  </ol>
  <p><strong>ForgotPassword.tsx</strong></p>
  <pre><code>// Page: Forgot Password
  const ForgotPassword = () =&gt; {
    // React Hooks: State
    const [ email, setEmail ] = useState('');
  
    // React Hooks: Bootstrap
    const [ validated, setValidated ] = useState(false);
  
    // React Hooks: Refs
    const formRef: React.RefObject&lt;HTMLFormElement&gt; = useRef(null);
  
    // React Hooks: Redux
    const authError = useSelector((state: ReduxState) =&gt; state.authReducer.error);
    const dispatch = useDispatch();
  
    // React Hooks: React Router DOM
    let history = useHistory();
  
    // Send Verification Code
    const sendVerificationCode = (event: any) =&gt; {
      console.log('Component: sendVerificationCode working')
  
      // Event: Cancels Event (Stops HTML Default Form Submit)
      event.preventDefault();
  
      // Event: Prevents Event Bubbling To Parent Elements
      event.stopPropagation();
  
      // Check Form Validity
      if (formRef.current &amp;&amp; formRef.current.checkValidity()) {
        // Validate Form
        setValidated(true);
  
        // Redux: Send Verification Code Request
        dispatch(sendVerificationCodeRequest(email, history));
      }
      else {
        // Do Nothing (Form.Control.Feedback Will Appear)
      }
    };
  
    return (
      &lt;div&gt;
        &lt;NavigationBar /&gt;
  
        &lt;Container id=&quot;forgot-password-container&quot;&gt;
          &lt;div id=&quot;forgot-password-inner-container&quot;&gt;
            &lt;div&gt;
              &lt;p id=&quot;forgot-password-title&quot;&gt;Reset Password&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;Form ref={formRef} noValidate validated={validated}&gt;
              &lt;Form.Group controlId=&quot;forgot-password-email&quot; className=&quot;form-group-container&quot;&gt;
                &lt;Form.Label className=&quot;form-field-title&quot;&gt;Email&lt;/Form.Label&gt;
  
                &lt;Form.Control
                  type={'email'}
                  placeholder={'Email'}
                  className=&quot;form-input&quot;
                  onChange={(event) =&gt; setEmail((event.target.value).toLowerCase())}
                  value={email}
                  maxLength={50}
                  required
                /&gt;
  
                &lt;Form.Control.Feedback type=&quot;invalid&quot;&gt;Invalid email&lt;/Form.Control.Feedback&gt;
              &lt;/Form.Group&gt;
  
              &lt;Button
                variant={'primary'}
                type={'submit'}
                id=&quot;login-button&quot;
                onClick={(event) =&gt; sendVerificationCode(event)}
              &gt;Send Verification Code&lt;/Button&gt;
            &lt;/Form&gt;
  
            &lt;div id=&quot;login-sign-up-container&quot;&gt;
              &lt;p id=&quot;login-need-account-text&quot;&gt;Need an account?&lt;/p&gt;
              &lt;button id=&quot;login-sign-up-button&quot; type=&quot;button&quot; onClick={() =&gt; history.push('sign-up')}&gt;Sign Up&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Container&gt;
  
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  };
  
  // Exports
  export default ForgotPassword;
  </code></pre>