intersection observer rootMargin not triggering callback

function handleIntersect(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        console.log('Box is intersecting with root');
      } else {
        console.log('Box is not intersecting with root');
      }
    });
  }

  function createObserver() {
    let observer;

    let options = {
      rootMargin: "500px 0px", // Extend the root's bounding box by 500px vertically
      threshold: 0             // Trigger the callback when any part of the element intersects
    };

    observer = new IntersectionObserver(handleIntersect, options);
    let boxElement = document.getElementById('boxElement');
    observer.observe(boxElement);
  }

  createObserver();

.spacer {
    height: 2000px;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 20px;
  }
  
  
  .as-console-wrapper {
    opacity: 0.5
  }

<div class="spacer"></div>
<div class="box" id="boxElement"></div>
<div class="spacer"></div>