Obteniendo casillas sobre los botones de carrusel “anterior” y “siguiente” en Bootstrap 5, y los botones no funcionan.

Estoy tratando de implementar un proyecto de clase de tutorial que trabaja en los botones deslizantes anterior y siguiente del carrusel de Bootstrap5. Si ejecuto esto, aparecen cajas sobre los botones y los botones no funcionan. Ver descripción de la imagen aquí

<section id="testimonials">

  <div id="testimonial-carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="1000">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <h2>Ya no tengo que olfatear a otros perros para encontrar amor. He encontrado al Corgi más guapo en TinDog. ¡Guau!</h2>
        <img class="testimonial-image" src="images/dog-img.jpg" alt="perfil-perro">
        <em>Pebbles, Nueva York</em>

      </div>
      <div class="carousel-item">
        <h2 class="testimonial-text">Mi perro solía estar muy solo, pero con la ayuda de TinDog, han encontrado el amor de su vida. Creo.</h2>
        <img class="testimonial-image" src="images/lady-img.jpg" alt="perfil-dama">
        <em>Beverly, Illinois</em>

      </div>

    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden"></span>
    </button>
  </div>

</section>