Bootsrap carousel adds its href to my url when clicking on the controls, how to fix it?

So I have this carousel with bootstrap:

        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="https://res.cloudinary.com/dc3d41gsz/image/upload/v1648305378/YelpCamp/sr6pcr7ygcctxa2btvs0.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="https://res.cloudinary.com/dc3d41gsz/image/upload/v1648294865/YelpCamp/ormnkuqqdy8fbwiupiss.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="..." class="d-block w-100" alt="...">
              </div>
            </div>

            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>

for example when a user types: http://localhost:4000/campgrounds/623f25558bb3157bd0fc0d49

it will show:

which works fine but when i click on the next button, in stead of showing the next photo, it will just add #carouselExampleControls to my URL??? like so: http://localhost:4000/campgrounds/623f25558bb3157bd0fc0d49#carouselExampleControls

I do have express server running with res.render but did not mention here to make the explanation of my problem simpler but when the carousel/bootstrap adds #carouselExampleControls to my url my express server kicks in and looks for another campground with id of /623f25558bb3157bd0fc0d49#carouselExampleControls which does not exist in my mongod database which then throws an error message as such:

Warning: a promise was rejected with a non-error: [object Undefined]

my bootstrap cdn links are upto date and i spent like 3 hours on fixing it but finally decided to ask stackoverflow. I think the solution would be rather something very simple maybe a typo somewhere or bootstrap versions or something

please help!!!