Boostrap 5 Scrollspy not working for hrefs in navbar that lead's with " / "

I have a multipage website and I m using a dynamic header so I need my links to have / before it so it always points towards root folder, I added bootstrap scrollspy and it works when I have my code like this

<body data-bs-spy="scroll" data-bs-target=".navbar-nav" data-bs-offset="0" class="scrollspy-example" tabindex="0" >

<li id="dropdownheading" class="nav-item   my-auto dropdown">
  <a class="nav-link dropdown-toggle " href="#" id="navbarDropdown" 
                     role="button" ata-bs-toggle="dropdown" aria-expanded="false">
    Dropdown heading
  </a>

  <ul class="dropdown-menu " aria-labelledby="navbarDropdown">
    <li><a class="dropdown-item" href="#div-id1">div 1</a></li>    
    <li><a class="dropdown-item" href="#div-id2">div 2</a></li>    
    <li><a class="dropdown-item" href="#div-id2">div 3</a></li>
  </ul>
</li>

But when I add / before ids it doesn't work, example

<body data-bs-spy="scroll" data-bs-target=".navbar-nav" data-bs-offset="0" class="scrollspy-example" tabindex="0" >

<li id="dropdownheading" class="nav-item   my-auto dropdown">
  <a class="nav-link dropdown-toggle " href="#" id="navbarDropdown" 
                     role="button" ata-bs-toggle="dropdown" aria-expanded="false">
    Dropdown heading
  </a>

  <ul class="dropdown-menu " aria-labelledby="navbarDropdown">
    <li><a class="dropdown-item" href="/#div-id1">div 1</a></li>    
    <li><a class="dropdown-item" href="/#div-id2">div 2</a></li>    
    <li><a class="dropdown-item" href="/#div-id2">div 3</a></li>
  </ul>
</li>

is there any solution