why is my intersectionObserver not recognizing

tag?

// Get all the sections on the page
const sections = document.querySelectorAll("section");

// Get the bubble element
const bubble = document.querySelector(".bubble");

// Define an array of gradients to be used for the bubble
const gradient = [
  "linear-gradient(to right top, #ffb88c, #de6262)",
  "linear-gradient(to right top, #a73737, #7a2828)",
  "linear-gradient(to right top, #ed4264, #ffedbc)",
];

// Define the options for the IntersectionObserver
const options = {
  threshold: 0.7,
};

// Create an IntersectionObserver instance and pass the callback function and options
let observer = new IntersectionObserver(navCheck, options);

// The callback function that gets called when an intersection occurs
function navCheck(entries) {
  // Loop through all the entries
  entries.forEach((entry) => {
    // Get the class name of the section
    const className = entry.target.className;

    // Get the active anchor with a matching data-page attribute
    const activeAnchor = document.querySelector(`[data-page=${className}]`);

    // Get the gradient index from the data-index attribute
    const gradientIndex = parseInt(entry.target.getAttribute("data-index"));

    // Get the bounding rectangle of the active anchor
    const coords = activeAnchor.getBoundingClientRect();

    // Create an object containing the dimensions and position of the active anchor
    const directions = {
      height: coords.height,
      top: coords.top,
      width: coords.width,
      left: coords.left,
    };

    // If the section is currently intersecting with the viewport
    if (entry.isIntersecting) {
      // Set the background of the bubble to the gradient corresponding to the current section
      bubble.style.background = gradient[gradientIndex];

      // Set the position and dimensions of the bubble to match the active anchor
      bubble.style.setProperty("left", `${directions.left}px`);
      bubble.style.setProperty("top", `${directions.top}px`);
      bubble.style.setProperty("width", `${directions.width}px`);
      bubble.style.setProperty("height", `${directions.height}px`);
    }
  });
}

// Observe all the sections on the page
sections.forEach((section) => {
  observer.observe(section);
});