Bootstrap Modal can not overlap in Bootstrap 5.1.3 version

Question

Currently I use the code below to create overlap modals, however in Bootstrap latest version (5.1.3) when I open the second modal then the previous is closed automatically. I tested in 5.0.2 and below versions and this does not happen. Is there anything change in new version or I am missing something?

<a data-bs-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Modal 1</h4>

          </div>
          <div class="container"></div>
          <div class="modal-body">Content for the dialog / modal goes here.
            <br />
            <br />
            <br />
            <p>more content</p>
            <br />
            <br />
            <br />  <a data-bs-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>

          </div>
          <div class="modal-footer">    <a href="#" data-bs-dismiss="modal" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>

          </div>
        </div>
      </div>
    </div>
    <div class="modal fade rotate" id="myModal2">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Modal 2</h4>

          </div>
          <div class="container"></div>
          <div class="modal-body">Content for the dialog / modal goes here.
            <br />
            <br />
            <p>come content</p>
            <br />
            <br />
            <br />  <a data-bs-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal</a>

          </div>
          <div class="modal-footer">    <a href="#" data-bs-dismiss="modal" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>

          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="myModal3">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Modal 3</h4>

          </div>
          <div class="container"></div>
          <div class="modal-body">Content for the dialog / modal goes here.
            <br />
            <br />
            <br />
            <br />
            <br />  <a data-bs-toggle="modal" href="#myModal4" class="btn btn-primary">Launch modal</a>

          </div>
          <div class="modal-footer">    <a href="#" data-bs-dismiss="modal" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>

          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="myModal4">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Modal 4</h4>

          </div>
          <div class="container"></div>
          <div class="modal-body">Content for the dialog / modal goes here.</div>
          <div class="modal-footer">    <a href="#" data-bs-dismiss="modal" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>

          </div>
        </div>
      </div>
    </div>