Bootstrap 5 - Navigation in carousel is not working

I am using bootstrap 5 and want to implement an image carousel and a modal.

Here is my example code.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-6">
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">

        <div class="carousel-item">
          <img src="https://via.placeholder.com/640x480.png/0088ff?text=animals+ratione" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/640x480.png/009999?text=animals+illum" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/640x480.png/007766?text=animals+dignissimos" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/0077aa?text=animals+ad" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/0000aa?text=animals+totam" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/000022?text=animals+et" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/0066ee?text=animals+sed" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/00dd33?text=animals+neque" class="d-block w-100" alt="ab natus nemo">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <div class="col-md-6">
    <h3>ab natus nemo</h3>
    <p>Architecto corrupti nulla dolorum sint. Rerum consequatur quidem et autem nobis qui. Hic fugiat voluptate dignissimos sed officia in odio.</p>
    <h4>$5.99</h4>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#buyModal">
                    Buy
                </button>
  </div>
</div>

<div class="modal fade" id="buyModal" tabindex="-1" role="dialog" aria-labelledby="buyModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="buyModalLabel">Buy: ab natus nemo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
      </div>
      <div class="modal-body">
        <p>You are about to purchase for $5.99.</p>
        <form method="POST" action="">
          <input type="hidden" name="_token" value="m46pmcbo0G2yuMVNyfwpcY07AomhmCY5AD2OixFy"> <button type="submit" class="btn btn-primary">Confirm</button>
        </form>
      </div>
    </div>
  </div>
</div>

In the image carousel the two navigation buttons (next & previous) do not work.

In my modal window the close button is not rendered properly.

I tried out the standard examples from bootstrap, but they are not working with my code.

Any suggestions what I am doing wrong?

from Bootstrap 5 - Navigation in carousel is not working