Scollspy removing active class but not adding to next li

Question

I have some unusual effect with using Bootstrap's scroll-spy component. The scroll-spy function is correctly removing the active class when I scroll past the first anchored section - so the function is working - but it does not apply the active class to the next li when it reaches it. I have wrapped the parent section to the nav list in a div and given it the data-bs-target attribute and removed all other data-bs-target="scrollspy" attributes from the page. Still, only the first li is applied with .active. Of course, the section ids match the hrefs for the list items. Something is messing with the classList.toggle() method (assuming that is what is being used) and I don't know enough about Bootstrap under the hood to sift it out. Any help would be greatly appreciated. It's the final component I need to complete my Bootstrap project for school. I have included a snippets below. The full codebase is located at https://github.com/treycoggins/web210/tree/main/week7

<!-- Main Content section -->
 <div data-bs-target="#navbar" data-bs-spy="scroll" tabindex="0" data-bs-offset="0">
    <main class="main" id="home">
      <section class="hero d-flex flex-column justify-content-evenly">
  
        <div class="row">
          <div class="hero__header offset-1 col-10 col-sm-7 display-1">
            From sun up to sun down, we have the best party in town.
          </div>
        </div>
  
        <div class="row m-0">
          <div class="col-11 col-sm-10 col-md-8 col-lg-7 offset-1 offset-sm-2 offset-md-4 offset-lg-5">
            <p class="display-3 display-lg-1 text-light fw-bold">
              Wednesday, June 24
            </p>
          </div>
          <div class="row">
            <div class="col-5 offset-1 offset-sm-2 offset-md-5">
              <p class="hero__header__sub col-4 fs-2 fw-bolder bg-danger rounded-5 text-white my-4 px-3 py-1">
                <i class="fa fa-map-marker fa-fw text-light"></i>
                Salvage Station&nbsp;<span class="d-none d-lg-inline">&nbsp;|&nbsp;468 Riverside
                  Dr.</span>&nbsp;|&nbsp;Asheville, NC
              </p>
            </div>
          </div>
          <div class="row m-0">
            <div class="col offset-1 offset-sm-2 offset-md-5">
              <a href="#book" role="button" class="btn btn__book fs-1 fw-bold btn-info text-light py-2 rounded-5"
                data-bs-toggle="modal" data-bs-target="#purchase-modal">
                Buy Tickets Now
              </a>
            </div>
          </div>
        </div>
      </section>
   </main>
 </div>