Custom Validation Message not shown

Expected behavior Created custom validation messages in JS but standard invalid messages from HTML are shown.

Actual behavior

Resources (screenshots, code snippets etc.)

 var ownerPassword = document.getElementById("stepperFormOwnerPassword");
var confirmOwnerPassword = document.getElementById("stepperFormConfirmOwnerPassword");



if (ownerPassword.value !== confirmOwnerPassword.value) {
  ownerPassword.setCustomValidity('Passwords do not match');
  confirmOwnerPassword.setCustomValidity('Passwords do not match');
  e.preventDefault();
} else {
  ownerPassword.setCustomValidity('');
  confirmOwnerPassword.setCustomValidity('');
}

<div class="col">
                  <div class="form-outline" data-mdb-input-init>
                    <input type="text" id="stepperFormOwnerPassword" class="form-control" required/>
                    <label class="form-label" for="stepperFormOwnerPassword">Password</label>
                    <div class="invalid-feedback">Invalid password</div>
                  </div>
                </div>

                <div class="col">
                  <div class="form-outline" data-mdb-input-init>
                    <input type="text" id="stepperFormConfirmOwnerPassword" class="form-control" required/>
                    <label class="form-label" for="stepperFormConfirmOwnerPassword">Confirm Password</label>
                    <div class="invalid-feedback">Invalid password</div>
                  </div>
                </div>