React Bootstrap表单：当验证为false时，不显示<Form.Control.Feedback> </ Form.Control.Feedback>

问题：

我正在实现一个表单并且很难理解为什么<Form.Control.Feedback></Form.Control.Feedback>在验证为false时不显示React Bootstrap：

重现步骤：

1. 当用户单击Send Verification Code按钮时，按钮上type={'submit'}的道具会被触发。
2. onClick={(event) => sendVerificationCode(event)}通过事件，我在这里使用event.preventDefault()并event.stopPropagation();停止取消该事件。
3. 在该字段中未输入任何内容的情况下，该sendVerificationCode功能可以正常运行，并且仅记录console.log('DO NOTHING');和console.log(validated);测试。
4. validated 正在工作并且为假，但是为什么<Form.Control.Feedback> </ Form.Control.Feedback>不显示。

忘记密码

// Page: Forgot Password
const ForgotPassword = () => {
  // React Hooks: State
  const [ email, setEmail ] = useState('');

  // React Hooks: Bootstrap
  const [ validated, setValidated ] = useState(false);

  // React Hooks: Refs
  const formRef: React.RefObject<HTMLFormElement> = useRef(null);

  // React Hooks: Redux
  const authError = useSelector((state: ReduxState) => state.authReducer.error);
  const dispatch = useDispatch();

  // React Hooks: React Router DOM
  let history = useHistory();

  // Send Verification Code
  const sendVerificationCode = (event: any) => {
    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 && 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 (
    <div>
      <NavigationBar />

      <Container id="forgot-password-container">
        <div id="forgot-password-inner-container">
          <div>
            <p id="forgot-password-title">Reset Password</p>
          </div>

          <Form ref={formRef} noValidate validated={validated}>
            <Form.Group controlId="forgot-password-email" className="form-group-container">
              <Form.Label className="form-field-title">Email</Form.Label>

              <Form.Control
                type={'email'}
                placeholder={'Email'}
                className="form-input"
                onChange={(event) => setEmail((event.target.value).toLowerCase())}
                value={email}
                maxLength={50}
                required
              />

              <Form.Control.Feedback type="invalid">Invalid email</Form.Control.Feedback>
            </Form.Group>

            <Button
              variant={'primary'}
              type={'submit'}
              id="login-button"
              onClick={(event) => sendVerificationCode(event)}
            >Send Verification Code</Button>
          </Form>

          <div id="login-sign-up-container">
            <p id="login-need-account-text">Need an account?</p>
            <button id="login-sign-up-button" type="button" onClick={() => history.push('sign-up')}>Sign Up</button>
          </div>
        </div>
      </Container>

      <Footer />
    </div>
  );
};

// Exports
export default ForgotPassword;