How reset form values using react bootstrap

My goal after clicking the register button is:

• Make input fields blank
• Do not show error tooltips

I’ve already tried using event.target.reset(); however the tooltips are still appearing on the screen.

export default function App() {
  const [showSucessAlert, setshowSucessAlert] = useState(false);
  const [validated, setValidated] = useState(false);
  const [transitionAlert, setTransitionAlert] = useState(false);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    event.preventDefault();

    if (form.checkValidity() === false) {
      event.stopPropagation();
    } else {
      handleClickTransitionAlert();
      setshowSucessAlert(true);
    }
    setValidated(true);
  };

  const handleClickTransitionAlert = () => {
    setTransitionAlert(true);
    setTimeout(() => {
      setTransitionAlert(false);
    }, 1700);
  };

  return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Form.Group className="position-relative" controlId="validationPassword">
        <Form.Label>Password</Form.Label>
        <InputGroup hasValidation id="validationPassword" />
        <Form.Control
          type="password"
          aria-describedby="validationPassword"
          required
        />
        <Form.Control.Feedback tooltip type="invalid">
          Please enter your Password.
        </Form.Control.Feedback>
      </Form.Group>
      <Alert
        className={`mt-1 p-1 position-fixed ${
          transitionAlert ? "alert-shown" : "alert-hidden"
        }`}
        show={showSucessAlert}
        variant="success"
      >
        Registered user!
      </Alert>
      <Button className="mt-5" variant="primary" type="submit">
        Register
      </Button>
    </Form>
  );
}

Here is the link on CodeSandbox

Every help is welcome!