Can't get Bootstrap Scrollspy working on React

Question

Hi I'm trying to get scrollspy working on React using Bootstrap but I seem to struggle to make it work. I have tried several ways to do this but I really have no idea how to make this work and it'll be much appreciate if you can help me with this...

This is the css

body {
margin: 0;
font-family: "Roboto", sans-serif !important;
scroll-behavior: smooth;
overflow-x: hidden;
position: relative;
height: 100%;
}

This is body in index.html

body
data-bs-spy="scroll"
data-bs-target="#navbar-menu"
data-bs-offset="0"
class="scrollspy-example"
tabindex="0"

This is in Navbar component and inside Menu component I'm assigning the hrefs

    <Navbar
  id="navbar-menu"
  className="py-2 py-md-0 bg-white"
  expand="lg"
  sticky="top"
>
  <Container>
    <NavbarBrand classes="" />
    <Navbar.Toggle aria-controls="basic-navbar-nav" className="border-0" />
    <Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
      <Menus classes="top-nav px-3 mx-2 px-md-2 py-md-4 mx-md-1 mb-3 mb-md-0" />
    </Navbar.Collapse>
  </Container>
</Navbar>

Inside Menu

<Nav className="flex-wrap flex-lg-nowrap me-3">
  {navMenu.map((menu, index) => (
    <Nav.Link        
      href={menu.href}
      key={menu.href}
    >
      {menu.name}
    </Nav.Link>
  ))}
</Nav>

I have Landing component that hold everything and inside each wrapper there's id name as same as the nav menu

const Landing = () => {
  return (
    <>
      <NavbarMenu />
      <HeroWrapper />
      <AboutWrapper />
      <EcosystemWrapper />
      <TokenomicsWrapper />
      <TeamWrapper />
      <FooterNav />
    </>
  );
};

export default Landing;