I am using React, Bootstrap and jQuery all together. Don't ask me why, i know it's horrible, just don't have time to get rid of jQuery. I use Bootstrap v5 and I got a modal in there, js:

<div
  className='modal fade'
  id="exampleModal"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div className="modal-dialog modal-dialog-centered">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="exampleModalLabel">
          Select here
        </h5>
      </div>
    </div>
  </div>
</div>

Now, I got the following as well, js:

<a
  className="nav-link wallet-btn"
  data-bs-toggle="modal"
  data-bs-target="#exampleModal"
>
  Connect here
</a> 

and this <a just opens a modal which is great. Modal has a x button , js:

<button
  type="button"
  className="btn-close"
  data-bs-dismiss="modal"
  aria-label="Close"
></button>

and clicking on it just closes the modal.

Problem I need to be able to close the modal programatically. As you can see, bootstrap does all this with I think(not sure) - data-bs-dismiss="modal" , but now I need such thing programatically. I tried to setAttribute but didn't work.

Prefer to use direct js real quick somewhere that fixes it instead of another jQuery code.