I used intersection observer to fade in some divs when they are visible by adding a class, for some reason it only adds it to the first one, on desktop all the these divs are in viewport so if the first one is visible so are the others, however when I scroll out of that section that has the divs and then I scroll back into it it adds the class to the next div and so on, my question is why doesnt it add the class to all the divs at the same time since they are visible right away.

const items = document.querySelectorAll(".item");
const newoptions = {
  root: null,
  threshold: 0.3,
};

const fadeWork = function (entries, observer) {
  const [entry] = entries;
  if (!entry.isIntersecting) return;
  entry.target.classList.add("items-active");
};

const newObserver = new IntersectionObserver(fadeWork, newoptions);

items.forEach((curr) => newObserver.observe(curr));

   <div class="items">
            <div class="item">
              <a target="_blank" href="https://sixteenclothingsite.netlify.app/"
                ><img src="assets/images/clothing-site.png" alt=""
              /></a>
            </div>
            <div class="item">
              <a target="_blank" href="https://drinosi.github.io/"
                ><img src="assets/images/portfolio-site.png" alt=""
              /></a>
            </div>
            <div class="item">
              <a target="_blank" href="https://drinos.helpjuice.com/"
                ><img src="assets/images/help-center.png" alt=""
              /></a>
            </div>
            <div class="item">
              <a target="_blank" href="https://wfskills.com/"
                ><img src="assets/images/contractor-site.png" alt=""
              /></a>
            </div>
            <div class="item">
              <a target="_blank" href=""
                ><img src="assets/images/bankist.png" alt=""
              /></a>
            </div>
          </div>

.item {
  transition: 1s;
  transform: translateY(10%);
  opacity: 0;
}

.items-active {
  transform: translate(0);
  opacity: 1;
}