I have a Blazor component with a bootstrap carousel with data-bs-ride="carousel". The carousel loads but does not transition, nor does the carousel respond to button click events. According to the docs for Bootstrap 5.3 carousel, autoplaying carousels should not be initialized

autoplaying carousels with the data-bs-ride="carousel" attribute as these are initialized automatically on page load. If you’re using autoplaying carousels with the data attribute, don’t explicitly initialize the same carousels with the constructor method.

I assume this means the carousel should just work without my adding any code other than the html as per the Bootstrap 5.3 docs for Autoplaying carousels. The only changes are the images.

<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img1.jpg" class="d-block w-100" alt="image 1">
    </div>
    <div class="carousel-item">
      <img src="img2.jpg" class="d-block w-100" alt="image 2">
    </div>
    <div class="carousel-item">
      <img src="img3.png" class="d-block w-100" alt="image 3">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

The first carousel image is displayed when the page loads. If I change the second image to active, it displays when the page loads. Similarly the third image, so the images can be found by the carousel.

The Web Developer Tools Window shows an error

CSS Hot Reload ignoring https://localhost:44303/lib/bootstrap/dist/css/bootstrap.min.46ein0sx1k.css because it was inaccessible or had more than 7000 rules.

I think this error is misleading as it occurs in a new browser window, not just on hot-reload. It is also supposed to be fixed.

Using Visual Studio 2022 17.12.0 default template for a Blazor Web App on .NET 9. Bootstrap 5.3.3

Why doesn't the carousel autoplay?

EDIT 1: The carousel works fine in a Razor page in the default ASP.NET Core Web App. So I guess the issue is with Razor components?