bootstrap modal does not close completly

Question

I am having trouble closing a bootstrap modal.

It is partially closed. The modal goes away but the darkened background appearing on the body by the modal does not get removed.

Here is my html

<button onclick="modalfunction();" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
    Vertically centered scrollable modal
  </button>

<!----------------------------------- modal ------------------------------------------>

<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
        
      </div>
      <div class="modal-body">
        <p>This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
        <br><br><br><br><br><br><br><br><br><br>
        <p>Just like that.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-close" data-bs-dismiss="modal" aria-label="Close">Close</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="submitForm();" >Submit</button>
      </div>
    </div>
  </div>
</div>

<!--------------------------------------------------------------------------------->

I am using this to open my modal at client end:-

function modalfunction(){
var myModal = new bootstrap.Modal(document.getElementById('exampleModalCenteredScrollable'), {});
myModal.show();
}