Установите пользовательские сообщения Bootstrap о недействительных/действительных сообщениях

Я создал форму входа/регистрации, используя response.js/bootstrap, и в форме регистрации у меня есть 4 входа. Один для имени пользователя, один для электронной почты и 2 для пароля (1 пароль и 1 для подтверждения). Я хочу показать сообщение, если 2 пароля не совпадают, например, пароли не совпадают.

Я попытался добавить класс boostrap с недействительной обратной связью после проверки ввода двух паролей, но он работает не так, как ожидалось. Вот код, который я использую:

   function handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    passwordChecker();


    if (form.checkValidity()) {
        handleLoginClick();
        reset();
        console.info("Form submitted successfully");
    } else {
        form.classList.add('was-validated');
    }
  }
function passwordChecker(){
    const confirmPasswordField = document.querySelector("#invalidpassword1");
    if (isRegistering && password !== checkPassword) {
        form.classList.add('was-validated');
        confirmPasswordField.classList.add("invalid-feedback"); 
        console.info("passwords dont match")
    } else {
        confirmPasswordField.classList.remove("invalid-feedback");
        console.info("passwords  match")
    }
  }


<div className = "form-floating mb-3">
                    <input 
                      type = "password" 
                      className = "form-control" 
                      id = "registerPassword" 
                      placeholder = "Enter your password"
                      value = {password}
                      onChange = {(e) => setPassword(e.target.value)}
                      required 
                    />
                    <label htmlFor = "registerPassword">Password</label>
                    <div className='invalid-feedback' id='invalidpassword2'>Please fill out this field</div>
                 
  <div className = "form-floating mb-3">
                    <input 
                      type = "password" 
                      className = "form-control" 
                      id = "confirmPassword" 
                      placeholder = "Confirm your password"
                      value = {checkPassword}
                      onChange = {(e) => setCheckPassword(e.target.value)}
                      required
                    />
                    <label htmlFor = "confirmPassword">Confirm Password</label>
                    <div id='invalidpassword1'>Passwords do not match</div> 
                  </div>

новый код, который я попробовал

<div id='invalidpassword1' className='invalid-feedback'>{checkPassword==='' ? 'Please fill out this field' : 'Passwords do not match'}</div>

теперь появляется правильное сообщение, но уравнение по-прежнему не работает, и когда пароли не совпадают, оно отображается правильно