Bootstrap modal working proper but not with overlay component

Question

The current interaction behavior is that after I click submit the form, it should have delayed time with spinner and success message but they're still not showing only modal close in setTimeout() inside showSuccess()

I have modal overlay after modal-footer and inside modal-content

<div id="modalOverlay" class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center" style="z-index: 1000;">
    <div id="loadingSpinner" class="spinner-border text-primary d-none" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>

    <div id="successMessage" class="alert alert-success mt-3 d-none" role="alert">
        Added Successully!
    </div>
</div>

function hideAddModal() {
    document.getElementById("modalOverlay").style.pointerEvents = "none";
    $("#addModal").modal("hide");
    $(".modal-backdrop").remove();
}
function showSpinner() {
    $("#loadingSpinner").removeClass("d-none");
    $("#successMessage").addClass("d-none");
    document.getElementById("modalOverlay").style.pointerEvents = "auto";
}
function showSuccess() {
    $("#loadingSpinner").addClass("d-none");
    $("#successMessage").removeClass("d-none");
    document.getElementById("modalOverlay").style.pointerEvents = "auto";

    setTimeout(function () {
        hideAddModal();
        $("#successMessage").addClass("d-none");
    }, 1000)
}

Below here is code snippet of submit function after button is triggered

bool isInserted = await InsertStored(value);
if (isInserted)
{
    BindGridView(); 
    Debug.WriteLine("Registering script to hide modal");
    ScriptManager.RegisterStartupScript(this, GetType(), Guid.NewGuid().ToString(),
    @"
    showSpinner();
    setTimeout(function() {
        showSuccess();
    }, 500);
    ",
    true);
}
else
{
    // Another ScriptManager to show alert error message
}