ScrollSpy active class not working in Bootstrap 5.3.3 – Blancer.com Tutorials and projects

I’m creating an app with React, and it has a sidebar where I want to use Bootstrap 5.3.3 ScrollSpy to highlight the items as I scroll down. I followed the documentation (it’s actually not the first time I use it) and I think my code is ok, but I can’t get the items in the sidebar highlighted as I scroll, because the “active” class is never applied to any of them.

Funny thing, though, is that besides it, I also straight copied a code snippet from the documentation in a test component, and it works. But my sidebar doesn’t.

This is my body element, which is supossed to be the scrollable / “spied” element:

<body data-bs-spy="scroll" data-bs-target="#sidebar" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">

This is my sidebar component, where the a anchors should be highlighted as I scroll down the body:

<div id="sidebar" className="grammar-class-list list-group">
     {meanings.map((meaning, index) => (
         <a href={`#grammar-class-${index + 1}`} className="grammar-class list-group-item list-group-item-action">{meaning.partOfSpeech}</a> 
     ))}
</div>

When it compiles, the DOM looks ok to me. The links in the sidebar are clickable and lead to their anchors in the body. But they don’t get highlighted, because the active class is never applied.

As I mentioned, I also used this other code from the BS docs as a dummy test, and it works, by “spying” the content where the anchors are, and highlighting them as I scroll.

 <div class="col-4">
   <div id="list-example" className="list-group">
    <a className="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
    <a className="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
    <a className="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
    <a className="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
  </div>
</div>
<div class="col-8">
  <div>
   <h4 id="list-item-1">Item 1</h4>
   <p>Some content</p>
   <h4 id="list-item-2">Item 2</h4>
   <p>Some more content</p>
   <h4 id="list-item-3">Item 3</h4>
   <p>Some more content</p>
   <h4 id="list-item-4">Item 4</h4>
   <p>Some more content</p>
 </div>
</div>

As you can see, I’m using Scrollspy via data atributtes. I’ve done it before and it worked, but I don’t what’s wrong with my sidebar.

I’m using Bootstrap via npm and including it in the body like this:

<script src="js/bootstrap.bundle.min.js"></script>

It’s working, because as mentioned the dummy example from the docs works in the same app.

You can see a live example here by searching for any word

Anybody has any idea what am I doing wrong? Please feel free to ask for more details if you need them.

Thanks in advance.