add and remove 'active' on scrolling is not working in navbar

Question

I have created an angular application in that I have to create 'on scrolling the navbar option should be change' and I written code for that in 'app.component.html' and I have created some components then given id's for section tag within those section tags I have written components selectors.

app.component.html

<!-- navbar -->
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item active">
            <a class="nav-link" aria-current="page" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About Us</a>
          </li>3
          <li class="nav-item">
            <a class="nav-link" href="#service_area">Service Area</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#studies">Innovation</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#industries">Industries</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact Us</a>
          </li>
        </ul>
  <!-- navbar end -->

<section id="home">
  <app-home ></app-home>
</section>

<section id="services">
  <app-services></app-services>
</section>

<section id="about">
  <app-about></app-about>
</section>

<section id="hiring">
  <app-hiring></app-hiring>
</section>

<section id="service_area">
  <app-service-area></app-service-area>
</section>

<section id="studies">
  <app-case-studies></app-case-studies>
</section>

<section>
  <app-industries id="industries"></app-industries>
</section>

<section id="techs">
  <app-techs></app-techs>
</section>

<section id="we_work">
  <app-we-work></app-we-work>
</section>

<section id="contact">
  <app-contact></app-contact>
</section>

script

<!-- js -->
<script>

    let section = document.querySelectorAll('section');
        let lists = document.querySelectorAll('.navbar-nav .nav-item');
        function activeLink(li) {
            lists.forEach((item) => item.classList.remove('active'));
            li.classList.add('active');
        }
        lists.forEach((item) =>
            item.addEventListener('click', function(){
                activeLink(this);
            }));

        window.onscroll = () => {
            section.forEach(sec => {
                let top = window.scrollY;
                let offset = sec.offsetTop;
                let height = sec.offsetHeight;
                let id = sec.getAttribute('id');

                if (top >= offset && top < offset + height) {
                    const target = document.querySelector(`[href='#${id}']`).parentElement;
                    activeLink(target);
                }
            })
        };
</script>