El componente de carrusel de bootstrap-vue3 no funciona.

Estoy creando una aplicación Vue con vue3 y utilizando el paquete bootstrap-vue3 para el Frontend.
Seguí la documentación de Bootstrap-Vue y copié el siguiente código, pero el carrusel no funciona.
Por supuesto, puedo usar otro paquete para carrusel, pero casi todo lo que se quería hacer ya se hizo con este paquete. Así que estoy buscando una solución para usar este paquete.
Por favor, háganme saber amablemente si ustedes saben cómo solucionar este problema.

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Diapositivas de texto con imagen -->
      <b-carousel-slide
        caption="Primera diapositiva"
        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
        img-src="https://picsum.photos/1024/480/?image=52"
      ></b-carousel-slide>

      <!-- Diapositivas con texto personalizado -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <h1>¡Hola mundo!</h1>
      </b-carousel-slide>

      <!-- Diapositivas solo con imagen -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>

      <!-- Diapositivas con espacio para imagen -->
      <!-- Nótese las clases .d-block y .img-fluid para prevenir la alineación predeterminada de la imagen del navegador -->
      <b-carousel-slide>
        <template #img>
          <img
            class="d-block img-fluid w-100"
            width="1024"
            height="480"
            src="https://picsum.photos/1024/480/?image=55"
            alt="espacio para imagen"
          >
        </template>
      </b-carousel-slide>

      <!-- Diapositiva con imagen en blanco para mantener la proporción de la diapositiva -->
      <b-carousel-slide caption="Imagen en blanco" img-blank img-alt="Imagen en blanco">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>
    </b-carousel>

    <p class="mt-4">
      Diapositiva n.°: {{ diapositiva }}<br>
      Deslizando: {{ desplazamiento }}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        diapositiva: 0,
        desplazamiento: null
      }
    },
    methods: {
      onSlideStart(diapositiva) {
        this.desplazamiento = true
      },
      onSlideEnd(diapositiva) {
        this.desplazamiento = false
      }
    }
  }
</script>