Set custom Bootstrap invalid/valid messages

I have made a login/register form using react.js/bootstrap and in the register form i have 4 inputs. One for username, one for email, and 2 for password (1 password and 1 for confirmation purposes), i want to show a message if the 2 passwords dont match, sth like passwords dont match.

I tried adding the invalid-feedback boostrap class after checking if the 2 password inputs but it doesnt work as expected Here is the code i am using :

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


    if (form.checkValidity()) {
        handleLoginClick();
        reset();
        console.log("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.log("passwords dont match")
    } else {
        confirmPasswordField.classList.remove("invalid-feedback");
        console.log("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>

new code I tried

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

now the right message pops up but still the equation doesnt work and when the passwords don't match it shows up correct

You need to manually set input field validity with setCustomValidity()

So, get the input field and set its validity to something (for example, a space to avoid browser displaying the message, and instead only showing BS feedback):

if (isRegistering && password !== checkPassword) {
    form.classList.add('was-validated');
    confirmPasswordField.classList.add("invalid-feedback"); 
    console.log("passwords dont match")

    const input = document.querySelector('#confirmPassword');
    input.setCustomValidity(" ");                
    input.reportValidity();