IntersectionObesrver API it intersects wrong between elements

Question

I have three divs and a div (in this div I have three links) that floats when you scroll down on the page. I have IntersectionObserver API set on the three divs and when the viewport is intersecting with one of this divs a link in that div that floats it changes the color. A problem arise when you're between this divs and in that moment it color two links instead of one and after it pass that it works correctly.

Here is the code:

const optionsWrapper = {
    root: null,
    rootMargin: "0px",
    threshold: 0.25
  };

  wrapperInstructions.forEach((element, index) => {
      let observerWrapperInstructions = new IntersectionObserver((entries, observer) =>{
        entries.forEach(entry => {
          if(entry.isIntersecting){

//i set to put the color when just 25% of element is visible but it doesn't work 
            if(entry.intersectionRatio >= 0.25){

// here it colors the links
              sumarLinkP[index].style.color = "#f60";
              sumarLinkSVG[index].style.fill = "#f60";
            }

            // wrapper-instructions is one of the three divs that intersects with the viewport
//i tried to set the color from here but it stayes the same color on all links no matter what
            if(entry.target.className === "wrapper-instructions"){

// here is the container that contains this links and set the scrollLeft to a link automatic
              containerLinksId.scrollLeft = anchorContainerLinks[index].offsetLeft - anchorContainerLinks[index].offsetWidth / 6; 
            }
            
          }
          else{
//here it removes the color
            sumarLinkP[index].style.color = "";
            sumarLinkSVG[index].style.fill = "";   
          }
        });
      }, optionsWrapper); 
    observerWrapperInstructions.observe(element);
  });

Here is something similar, but I can't reproduce the code that is above because is more complex and here is a simpler representation:

const scrollableDiv = document.getElementById("scrollableDiv");
const anchor = document.querySelectorAll(".scrollableDiv a");
const contentH2 = document.querySelectorAll("#content h2");

contentH2.forEach((element, index) => {

    let observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                
                console.log(anchor[index]);


                anchor[index].style.color = "white";

                scrollableDiv.scrollLeft = anchor[index].offsetLeft - anchor[index].offsetWidth / 100;
            }else{
                anchor[index].style.color = "";
            }
        })
    });

    observer.observe(element);
});

.scrollableDiv{
    width: 100%;
    height: max-content;
    background-color: aqua;
    position: fixed;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1100px);
    overflow-x: scroll;
}
.scrollableDiv::-webkit-scrollbar{
    display: none;
}

.scrollableDiv a{
    display: inline-block;
    width: 1100px;
    color: black;
    border: 1px solid black;
}

<div class="scrollableDiv" id="scrollableDiv">
    <a href="#firstTitle">Hello1</a>
    <a href="#secondTitle">Hello2</a>
    <a href="#thirdTitle">Hello3</a>
</div>


<section class="content" id="content">
    <h2 id="firstTitle">Hello1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius cum nihil officia voluptates distinctio odio accusamus odit hic labore. Amet accusantium quos autem consectetur magnam veniam sunt qui nemo aspernatur vel quisquam cum magni facere impedit corporis, beatae nam inventore incidunt itaque doloribus et sapiente. Rem exercitationem excepturi est ipsum dicta sint, ipsam repellendus, numquam, ut pariatur atque molestiae nihil facilis quae inventore! Exercitationem odio necessitatibus laboriosam libero corrupti, nihil aspernatur dolores assumenda tenetur. Veritatis veniam rem vero quibusdam maxime architecto praesentium enim quasi necessitatibus neque voluptatibus a officiis quod, sed hic, ab aut et sint aliquid tempore, voluptas animi libero earum. Aliquam soluta nemo fuga qui, obcaecati explicabo sunt officia. Similique laboriosam animi sint perferendis expedita minima aliquam repellat reiciendis? Doloremque vel beatae commodi quia, eveniet assumenda! Ullam doloribus eum, cumque quidem aliquam assumenda eveniet maiores facere non numquam nisi ipsum aut adipisci alias harum omnis beatae consectetur maxime, sint molestiae dolore possimus fuga sed excepturi? Animi accusamus sunt nam qui alias. Fugit ipsa obcaecati doloribus, voluptatibus dolore ullam odit dignissimos dolor molestias, minus deserunt natus repellat ea a distinctio dicta cumque blanditiis. Blanditiis consequuntur et quis quia sit suscipit molestias minima minus veniam tenetur natus quae consectetur at, laborum exercitationem, harum voluptatum temporibus dolores possimus laudantium hic eos dolorum? Eveniet quibusdam est facilis, fugiat tenetur, corrupti architecto possimus rerum placeat id quia deleniti veniam, temporibus earum excepturi. Ipsum atque numquam tempore corrupti nesciunt est eveniet fugiat culpa nemo, rerum, reprehenderit modi placeat nam optio deleniti aliquam eum doloribus quae! Sit, deserunt aperiam. Pariatur provident nam omnis hic culpa quasi illum ea quod cum sapiente quia, corporis eligendi veritatis repellat fugiat doloremque tempore sequi! Nihil quidem fugiat officia ea accusamus, dolores, a iusto eius impedit aliquid ut. Exercitationem non, et saepe soluta, voluptas explicabo laborum, adipisci recusandae quisquam sunt impedit. Possimus iure expedita blanditiis repellat odit alias repudiandae. Architecto atque autem reiciendis ut iure quod? Eaque ex, ullam rerum iusto omnis quis magni facere nobis deserunt eligendi dolorum repellendus pariatur, expedita quae autem modi delectus, cumque dolore commodi accusantium voluptate. Atque laborum saepe quo. Repellat commodi quas, delectus deserunt sed atque ex optio cupiditate nulla sequi excepturi corrupti animi maxime quos reiciendis hic quae dolores facere esse id facilis ipsum sit molestiae? Corporis natus beatae, nostrum cum, rerum eum ea dicta dolor, vel expedita nam laboriosam atque? Debitis voluptatum et rerum id optio adipisci sequi quibusdam repellendus libero, iure distinctio aliquid! Culpa qui expedita quasi assumenda. Placeat qui eos magni. Veritatis exercitationem, sapiente earum cupiditate quae quod optio, unde eius nisi laborum animi impedit quidem eum reprehenderit tempora voluptatem in distinctio ea hic ipsam facere molestiae aut quam sint. Exercitationem totam, ad repellendus, ipsa odit alias consequatur sit suscipit dignissimos sed, nobis earum! Dignissimos nobis similique quo perferendis nam eveniet quae assumenda minima, sequi culpa, in nulla necessitatibus reprehenderit id ducimus tempore totam earum quidem magni libero dolorem! Obcaecati quos officiis, enim praesentium fugit cum nemo necessitatibus adipisci incidunt doloremque, hic inventore tenetur dignissimos tempora in pariatur accusantium quas.</p>

    <h2 id="secondTitle">Hello2</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius cum nihil officia voluptates distinctio odio accusamus odit hic labore. Amet accusantium quos autem consectetur magnam veniam sunt qui nemo aspernatur vel quisquam cum magni facere impedit corporis, beatae nam inventore incidunt itaque doloribus et sapiente. Rem exercitationem excepturi est ipsum dicta sint, ipsam repellendus, numquam, ut pariatur atque molestiae nihil facilis quae inventore! Exercitationem odio necessitatibus laboriosam libero corrupti, nihil aspernatur dolores assumenda tenetur. Veritatis veniam rem vero quibusdam maxime architecto praesentium enim quasi necessitatibus neque voluptatibus a officiis quod, sed hic, ab aut et sint aliquid tempore, voluptas animi libero earum. Aliquam soluta nemo fuga qui, obcaecati explicabo sunt officia. Similique laboriosam animi sint perferendis expedita minima aliquam repellat reiciendis? Doloremque vel beatae commodi quia, eveniet assumenda! Ullam doloribus eum, cumque quidem aliquam assumenda eveniet maiores facere non numquam nisi ipsum aut adipisci alias harum omnis beatae consectetur maxime, sint molestiae dolore possimus fuga sed excepturi? Animi accusamus sunt nam qui alias. Fugit ipsa obcaecati doloribus, voluptatibus dolore ullam odit dignissimos dolor molestias, minus deserunt natus repellat ea a distinctio dicta cumque blanditiis. Blanditiis consequuntur et quis quia sit suscipit molestias minima minus veniam tenetur natus quae consectetur at, laborum exercitationem, harum voluptatum temporibus dolores possimus laudantium hic eos dolorum? Eveniet quibusdam est facilis, fugiat tenetur, corrupti architecto possimus rerum placeat id quia deleniti veniam, temporibus earum excepturi. Ipsum atque numquam tempore corrupti nesciunt est eveniet fugiat culpa nemo, rerum, reprehenderit modi placeat nam optio deleniti aliquam eum doloribus quae! Sit, deserunt aperiam. Pariatur provident nam omnis hic culpa quasi illum ea quod cum sapiente quia, corporis eligendi veritatis repellat fugiat doloremque tempore sequi! Nihil quidem fugiat officia ea accusamus, dolores, a iusto eius impedit aliquid ut. Exercitationem non, et saepe soluta, voluptas explicabo laborum, adipisci recusandae quisquam sunt impedit. Possimus iure expedita blanditiis repellat odit alias repudiandae. Architecto atque autem reiciendis ut iure quod? Eaque ex, ullam rerum iusto omnis quis magni facere nobis deserunt eligendi dolorum repellendus pariatur, expedita quae autem modi delectus, cumque dolore commodi accusantium voluptate. Atque laborum saepe quo. Repellat commodi quas, delectus deserunt sed atque ex optio cupiditate nulla sequi excepturi corrupti animi maxime quos reiciendis hic quae dolores facere esse id facilis ipsum sit molestiae? Corporis natus beatae, nostrum cum, rerum eum ea dicta dolor, vel expedita nam laboriosam atque? Debitis voluptatum et rerum id optio adipisci sequi quibusdam repellendus libero, iure distinctio aliquid! Culpa qui expedita quasi assumenda. Placeat qui eos magni. Veritatis exercitationem, sapiente earum cupiditate quae quod optio, unde eius nisi laborum animi impedit quidem eum reprehenderit tempora voluptatem in distinctio ea hic ipsam facere molestiae aut quam sint. Exercitationem totam, ad repellendus, ipsa odit alias consequatur sit suscipit dignissimos sed, nobis earum! Dignissimos nobis similique quo perferendis nam eveniet quae assumenda minima, sequi culpa, in nulla necessitatibus reprehenderit id ducimus tempore totam earum quidem magni libero dolorem! Obcaecati quos officiis, enim praesentium fugit cum nemo necessitatibus adipisci incidunt doloremque, hic inventore tenetur dignissimos tempora in pariatur accusantium quas.</p>

    <h2 id="thirdTitle">Hello3</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius cum nihil officia voluptates distinctio odio accusamus odit hic labore. Amet accusantium quos autem consectetur magnam veniam sunt qui nemo aspernatur vel quisquam cum magni facere impedit corporis, beatae nam inventore incidunt itaque doloribus et sapiente. Rem exercitationem excepturi est ipsum dicta sint, ipsam repellendus, numquam, ut pariatur atque molestiae nihil facilis quae inventore! Exercitationem odio necessitatibus laboriosam libero corrupti, nihil aspernatur dolores assumenda tenetur. Veritatis veniam rem vero quibusdam maxime architecto praesentium enim quasi necessitatibus neque voluptatibus a officiis quod, sed hic, ab aut et sint aliquid tempore, voluptas animi libero earum. Aliquam soluta nemo fuga qui, obcaecati explicabo sunt officia. Similique laboriosam animi sint perferendis expedita minima aliquam repellat reiciendis? Doloremque vel beatae commodi quia, eveniet assumenda! Ullam doloribus eum, cumque quidem aliquam assumenda eveniet maiores facere non numquam nisi ipsum aut adipisci alias harum omnis beatae consectetur maxime, sint molestiae dolore possimus fuga sed excepturi? Animi accusamus sunt nam qui alias. Fugit ipsa obcaecati doloribus, voluptatibus dolore ullam odit dignissimos dolor molestias, minus deserunt natus repellat ea a distinctio dicta cumque blanditiis. Blanditiis consequuntur et quis quia sit suscipit molestias minima minus veniam tenetur natus quae consectetur at, laborum exercitationem, harum voluptatum temporibus dolores possimus laudantium hic eos dolorum? Eveniet quibusdam est facilis, fugiat tenetur, corrupti architecto possimus rerum placeat id quia deleniti veniam, temporibus earum excepturi. Ipsum atque numquam tempore corrupti nesciunt est eveniet fugiat culpa nemo, rerum, reprehenderit modi placeat nam optio deleniti aliquam eum doloribus quae! Sit, deserunt aperiam. Pariatur provident nam omnis hic culpa quasi illum ea quod cum sapiente quia, corporis eligendi veritatis repellat fugiat doloremque tempore sequi! Nihil quidem fugiat officia ea accusamus, dolores, a iusto eius impedit aliquid ut. Exercitationem non, et saepe soluta, voluptas explicabo laborum, adipisci recusandae quisquam sunt impedit. Possimus iure expedita blanditiis repellat odit alias repudiandae. Architecto atque autem reiciendis ut iure quod? Eaque ex, ullam rerum iusto omnis quis magni facere nobis deserunt eligendi dolorum repellendus pariatur, expedita quae autem modi delectus, cumque dolore commodi accusantium voluptate. Atque laborum saepe quo. Repellat commodi quas, delectus deserunt sed atque ex optio cupiditate nulla sequi excepturi corrupti animi maxime quos reiciendis hic quae dolores facere esse id facilis ipsum sit molestiae? Corporis natus beatae, nostrum cum, rerum eum ea dicta dolor, vel expedita nam laboriosam atque? Debitis voluptatum et rerum id optio adipisci sequi quibusdam repellendus libero, iure distinctio aliquid! Culpa qui expedita quasi assumenda. Placeat qui eos magni. Veritatis exercitationem, sapiente earum cupiditate quae quod optio, unde eius nisi laborum animi impedit quidem eum reprehenderit tempora voluptatem in distinctio ea hic ipsam facere molestiae aut quam sint. Exercitationem totam, ad repellendus, ipsa odit alias consequatur sit suscipit dignissimos sed, nobis earum! Dignissimos nobis similique quo perferendis nam eveniet quae assumenda minima, sequi culpa, in nulla necessitatibus reprehenderit id ducimus tempore totam earum quidem magni libero dolorem! Obcaecati quos officiis, enim praesentium fugit cum nemo necessitatibus adipisci incidunt doloremque, hic inventore tenetur dignissimos tempora in pariatur accusantium quas.</p>
</section>

But in my problem when you reach between two divs, it sets the color on both of links and after it passes it unset the color on one it puts on the other.