IntersectionObserver is not working on scroll up

Question

I have one sticky navbar where a list item highlights when its corresponding section is viewed via scroll and I am using IntersectionObserver. I am getting problem only for the first item which has its section defined immediately after the sticky navbar following the second section. The issue is when I scroll up from second section, I see isIntersecting:false (as expected) but the first section which I just entered is not showing any intersection although it shows isIntersecting:false as well at certain point when I continue scroll up.

Here is the JS code. The below createMenuList(ele) is called when a DOM section is loaded on the page. There are total 3 items/sections.

var elements = [], elementsLength = 3;
    function createMenuList(ele) {
      if (ele != null) {
          elements.push(ele);
      }
      else if (ele == null) {
          console.log('Sticky nav list is not matching with the page structure');
      }
    
      if (elements.length == elementsLength) {
          const config = { threshold: [0.5] };
          var observer = new IntersectionObserver(function (entries) {
              console.log(entries);
              entries.forEach(entry => {
                  if (entry.isIntersecting) {
                      var current = document.querySelector(".anchor .anchor-module li.active");
                      if (current) {
                          current.className = current.className.replace("active", "");
                          current.className = current.className.replace(" active", "");
                      }
                      entry.target.closest('#main_skip').querySelector('.anchor .anchor-module li > a[href="#' + entry.target.id + '"]').closest('li').className += " active";
                  }
              });
          }, config);
        elements.forEach(link => observer.observe(link));
    }

Thanks in advance for the help!