Javascript debug - hide bootstrap 5 modal programatically

I am trying to hide Bootstrap modal using JavaScript but it seem to not work.

Here are two JS function to generate, show and hide bootstrap modal.

var spinnerModalWrap = null;

const spinnerModalShow = () => {
if (spinnerModalWrap !== null) {
spinnerModalWrap.remove();
}

spinnerModalWrap = document.createElement('div');

spinnerModalWrap.innerHTML = `
<div class="modal fade" tabindex="-1" id="global_spinner_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="d-block text-center">
<div class="text-dark fs-3 my-5">Please wait...</div>
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;

document.body.append(spinnerModalWrap);

// var spinnerModal = new bootstrap.Modal(document.getElementById('global_spinner_modal'), {

// });

var spinnerModal = new bootstrap.Modal(spinnerModalWrap.querySelector('#global_spinner_modal'));
spinnerModal.show();
}

const spinnerModalHide = () => {
const spinnerModal = bootstrap.Modal.getInstance(document.getElementById('global_spinner_modal'));
spinnerModal.hide();
}


then on html file I am calling the functions as below. Modal shows but doesn't seem to hide.
function getReply(ticketId) {
spinnerModalShow();

$.ajax({
url:'reply-fetch.php',
method:'POST',
data:{
ticketId : ticketId
},
success:function(data){
$('#reply_container').html(data);
}
});

spinnerModalHide();
}