Boostrap scrollspy not working with copied code from docs

Question

I'm trying to get scrollspy working with my react app and I'm having issues. I've literally copied the code from the docs and it doesn't seem to work. When I click on the links in the navbar, the page scrolls to that location but it is not highlighting. When I inspect the page, it is also not toggling the .active class as I scroll over that section.

I was originally trying to implement this in an app with components but found it wasn't working, thus I'm here right now trying to get a simple base case going.

I've tried react-scrollspy but then that led me to another issue I couldn't figure out. I'm planning on trying react-ui-scrollspy next.

Any and all help is appreciated!

package.json:

{
  "name": "scrollspy-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Here is my code:

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import "bootstrap/dist/css/bootstrap.min.css";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

    <App />

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

App.js

import "./App.css";

function App() {
  return (
    <div className="App">
      <nav id="navbar-example2" className="navbar bg-light px-3 mb-3">
        <a className="navbar-brand" href="#home">
          Navbar
        </a>
        <ul className="nav nav-pills">
          <li className="nav-item">
            <a className="nav-link" href="#scrollspyHeading1">
              First
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#scrollspyHeading2">
              Second
            </a>
          </li>
        </ul>
      </nav>
      <div
        id="home"
        data-bs-spy="scroll"
        data-bs-target="#navbar-example2"
        data-bs-root-margin="0px 0px -40%"
        data-bs-smooth-scroll="true"
        className="scrollspy-example bg-light p-3 rounded-2"
        tabIndex="0"
      >
        <h4 id="scrollspyHeading1">First heading</h4>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt
          reiciendis voluptatibus molestiae neque cum quam odio sed tempora
          deleniti! Debitis dolores incidunt a alias saepe esse facere illo in
          unde?
        </p>
        <h4 id="scrollspyHeading2">Second heading</h4>
        <p>
          I'm baby shoreditch mlkshk whatever, next level fashion axe occupy
          PBR&B DSA disrupt blog heirloom scenester. Cliche snackwave
          flexitarian praxis master cleanse affogato mlkshk vexillologist subway
          tile swag vegan tofu tote bag tousled la croix. Vibecession coloring
          book salvia yr vape distillery hell of narwhal jianbing gochujang
          vinyl. Shaman normcore hoodie swag stumptown. Banh mi gastropub
          raclette austin lo-fi prism semiotics kitsch yuccie. Slow-carb
          affogato skateboard, pork belly everyday carry vegan put a bird on it
          scenester typewriter. Portland godard letterpress kogi four dollar
          toast knausgaard. Cliche stumptown chambray 90's chia, pabst beard
          small batch four loko hexagon glossier cloud bread disrupt occupy.
          Listicle adaptogen four loko art party typewriter yr. Vaporware synth
          mustache, chambray shaman DSA paleo hoodie farm-to-table poke.
          Gluten-free +1 umami yes plz celiac yuccie. Pabst subway tile XOXO
          enamel pin vice cold-pressed. Poke cardigan iceland artisan salvia
          bushwick neutra VHS twee cloud bread. Street art shoreditch narwhal,
          freegan pabst pickled DSA schlitz. Sustainable austin bitters marfa.
          Butcher activated charcoal street art fam portland asymmetrical.
          Polaroid man braid selfies organic yr. Vape squid put a bird on it
          kale chips vice biodiesel tumeric kitsch migas cronut everyday carry
          succulents. Neutra everyday carry mlkshk tbh, organic chartreuse
          keytar tacos church-key taxidermy typewriter 8-bit. YOLO wolf
          pitchfork plaid activated charcoal tofu. Ugh selfies chia bicycle
          rights fashion axe bitters, VHS cold-pressed fanny pack next level
          mlkshk fingerstache taxidermy. Banh mi selvage unicorn typewriter,
          next level taxidermy shaman authentic chartreuse waistcoat skateboard
          tilde humblebrag tacos small batch. Wayfarers four loko forage,
          selfies tumeric tbh snackwave same bodega boys authentic pinterest
          neutra vice. Pug gochujang meggings put a bird on it tumblr hexagon
          taiyaki. Lo-fi asymmetrical hammock authentic sus. Kale chips
          slow-carb hashtag, knausgaard artisan live-edge try-hard disrupt
          mixtape crucifix whatever butcher. Poutine gatekeep +1 selvage woke
          heirloom disrupt tousled echo park four loko pour-over XOXO etsy
          shoreditch. Locavore migas sustainable offal ugh echo park, fanny pack
          synth hoodie umami next level trust fund quinoa pinterest. 90's XOXO
          tousled enamel pin JOMO, tofu semiotics master cleanse.
        </p>
        <h4 id="scrollspyHeading3">Third heading</h4>
        <p>
          I'm baby shoreditch mlkshk whatever, next level fashion axe occupy
          PBR&B DSA disrupt blog heirloom scenester. Cliche snackwave
          flexitarian praxis master cleanse affogato mlkshk vexillologist subway
          tile swag vegan tofu tote bag tousled la croix. Vibecession coloring
          book salvia yr vape distillery hell of narwhal jianbing gochujang
          vinyl. Shaman normcore hoodie swag stumptown. Banh mi gastropub
          raclette austin lo-fi prism semiotics kitsch yuccie. Slow-carb
          affogato skateboard, pork belly everyday carry vegan put a bird on it
          scenester typewriter. Portland godard letterpress kogi four dollar
          toast knausgaard. Cliche stumptown chambray 90's chia, pabst beard
          small batch four loko hexagon glossier cloud bread disrupt occupy.
          Listicle adaptogen four loko art party typewriter yr. Vaporware synth
          mustache, chambray shaman DSA paleo hoodie farm-to-table poke.
          Gluten-free +1 umami yes plz celiac yuccie. Pabst subway tile XOXO
          enamel pin vice cold-pressed. Poke cardigan iceland artisan salvia
          bushwick neutra VHS twee cloud bread. Street art shoreditch narwhal,
          freegan pabst pickled DSA schlitz. Sustainable austin bitters marfa.
          Butcher activated charcoal street art fam portland asymmetrical.
          Polaroid man braid selfies organic yr. Vape squid put a bird on it
          kale chips vice biodiesel tumeric kitsch migas cronut everyday carry
          succulents. Neutra everyday carry mlkshk tbh, organic chartreuse
          keytar tacos church-key taxidermy typewriter 8-bit. YOLO wolf
          pitchfork plaid activated charcoal tofu. Ugh selfies chia bicycle
          rights fashion axe bitters, VHS cold-pressed fanny pack next level
          mlkshk fingerstache taxidermy. Banh mi selvage unicorn typewriter,
          next level taxidermy shaman authentic chartreuse waistcoat skateboard
          tilde humblebrag tacos small batch. Wayfarers four loko forage,
          selfies tumeric tbh snackwave same bodega boys authentic pinterest
          neutra vice. Pug gochujang meggings put a bird on it tumblr hexagon
          taiyaki. Lo-fi asymmetrical hammock authentic sus. Kale chips
          slow-carb hashtag, knausgaard artisan live-edge try-hard disrupt
          mixtape crucifix whatever butcher. Poutine gatekeep +1 selvage woke
          heirloom disrupt tousled echo park four loko pour-over XOXO etsy
          shoreditch. Locavore migas sustainable offal ugh echo park, fanny pack
          synth hoodie umami next level trust fund quinoa pinterest. 90's XOXO
          tousled enamel pin JOMO, tofu semiotics master cleanse.
        </p>
        <h4 id="scrollspyHeading4">Fourth heading</h4>
        <p>
          I'm baby shoreditch mlkshk whatever, next level fashion axe occupy
          PBR&B DSA disrupt blog heirloom scenester. Cliche snackwave
          flexitarian praxis master cleanse affogato mlkshk vexillologist subway
          tile swag vegan tofu tote bag tousled la croix. Vibecession coloring
          book salvia yr vape distillery hell of narwhal jianbing gochujang
          vinyl. Shaman normcore hoodie swag stumptown. Banh mi gastropub
          raclette austin lo-fi prism semiotics kitsch yuccie. Slow-carb
          affogato skateboard, pork belly everyday carry vegan put a bird on it
          scenester typewriter. Portland godard letterpress kogi four dollar
          toast knausgaard. Cliche stumptown chambray 90's chia, pabst beard
          small batch four loko hexagon glossier cloud bread disrupt occupy.
          Listicle adaptogen four loko art party typewriter yr. Vaporware synth
          mustache, chambray shaman DSA paleo hoodie farm-to-table poke.
          Gluten-free +1 umami yes plz celiac yuccie. Pabst subway tile XOXO
          enamel pin vice cold-pressed. Poke cardigan iceland artisan salvia
          bushwick neutra VHS twee cloud bread. Street art shoreditch narwhal,
          freegan pabst pickled DSA schlitz. Sustainable austin bitters marfa.
          Butcher activated charcoal street art fam portland asymmetrical.
          Polaroid man braid selfies organic yr. Vape squid put a bird on it
          kale chips vice biodiesel tumeric kitsch migas cronut everyday carry
          succulents. Neutra everyday carry mlkshk tbh, organic chartreuse
          keytar tacos church-key taxidermy typewriter 8-bit. YOLO wolf
          pitchfork plaid activated charcoal tofu. Ugh selfies chia bicycle
          rights fashion axe bitters, VHS cold-pressed fanny pack next level
          mlkshk fingerstache taxidermy. Banh mi selvage unicorn typewriter,
          next level taxidermy shaman authentic chartreuse waistcoat skateboard
          tilde humblebrag tacos small batch. Wayfarers four loko forage,
          selfies tumeric tbh snackwave same bodega boys authentic pinterest
          neutra vice. Pug gochujang meggings put a bird on it tumblr hexagon
          taiyaki. Lo-fi asymmetrical hammock authentic sus. Kale chips
          slow-carb hashtag, knausgaard artisan live-edge try-hard disrupt
          mixtape crucifix whatever butcher. Poutine gatekeep +1 selvage woke
          heirloom disrupt tousled echo park four loko pour-over XOXO etsy
          shoreditch. Locavore migas sustainable offal ugh echo park, fanny pack
          synth hoodie umami next level trust fund quinoa pinterest. 90's XOXO
          tousled enamel pin JOMO, tofu semiotics master cleanse.
        </p>
        <h4 id="scrollspyHeading5">Fifth heading</h4>
        <p>
          I'm baby shoreditch mlkshk whatever, next level fashion axe occupy
          PBR&B DSA disrupt blog heirloom scenester. Cliche snackwave
          flexitarian praxis master cleanse affogato mlkshk vexillologist subway
          tile swag vegan tofu tote bag tousled la croix. Vibecession coloring
          book salvia yr vape distillery hell of narwhal jianbing gochujang
          vinyl. Shaman normcore hoodie swag stumptown. Banh mi gastropub
          raclette austin lo-fi prism semiotics kitsch yuccie. Slow-carb
          affogato skateboard, pork belly everyday carry vegan put a bird on it
          scenester typewriter. Portland godard letterpress kogi four dollar
          toast knausgaard. Cliche stumptown chambray 90's chia, pabst beard
          small batch four loko hexagon glossier cloud bread disrupt occupy.
          Listicle adaptogen four loko art party typewriter yr. Vaporware synth
          mustache, chambray shaman DSA paleo hoodie farm-to-table poke.
          Gluten-free +1 umami yes plz celiac yuccie. Pabst subway tile XOXO
          enamel pin vice cold-pressed. Poke cardigan iceland artisan salvia
          bushwick neutra VHS twee cloud bread. Street art shoreditch narwhal,
          freegan pabst pickled DSA schlitz. Sustainable austin bitters marfa.
          Butcher activated charcoal street art fam portland asymmetrical.
          Polaroid man braid selfies organic yr. Vape squid put a bird on it
          kale chips vice biodiesel tumeric kitsch migas cronut everyday carry
          succulents. Neutra everyday carry mlkshk tbh, organic chartreuse
          keytar tacos church-key taxidermy typewriter 8-bit. YOLO wolf
          pitchfork plaid activated charcoal tofu. Ugh selfies chia bicycle
          rights fashion axe bitters, VHS cold-pressed fanny pack next level
          mlkshk fingerstache taxidermy. Banh mi selvage unicorn typewriter,
          next level taxidermy shaman authentic chartreuse waistcoat skateboard
          tilde humblebrag tacos small batch. Wayfarers four loko forage,
          selfies tumeric tbh snackwave same bodega boys authentic pinterest
          neutra vice. Pug gochujang meggings put a bird on it tumblr hexagon
          taiyaki. Lo-fi asymmetrical hammock authentic sus. Kale chips
          slow-carb hashtag, knausgaard artisan live-edge try-hard disrupt
          mixtape crucifix whatever butcher. Poutine gatekeep +1 selvage woke
          heirloom disrupt tousled echo park four loko pour-over XOXO etsy
          shoreditch. Locavore migas sustainable offal ugh echo park, fanny pack
          synth hoodie umami next level trust fund quinoa pinterest. 90's XOXO
          tousled enamel pin JOMO, tofu semiotics master cleanse.
        </p>
      </div>
    </div>
  );
}

export default App;

App.css

.App {
  text-align: center;
}

.scrollspy-example {
  overflow-y: scroll;
}