How to make custom cursor stay with cursor on scroll

Looking for some help with a custom cursor. It’s all working fine except for when you scroll, the custom cursor stays where it is on the page until you move the mouse again and then it catches up. So I need to make the custom cursor stick to the position of the default cursor at all times.

Thanks in advance!

const queryCursor = document.querySelector(".cursor");

var cursor = {
  delay: 8,
  _x: 0,
  _y: 0,
  endX: window.innerWidth / 2,
  endY: window.innerHeight / 2,
  cursorVisible: true,
  cursorEnlarged: false,
  $cursor: queryCursor,

  init: function () {
    this.outlineSize = this.$cursor.offsetWidth;
    this.setupEventListeners();
    this.animateDotOutline();
  },

  setupEventListeners: function () {
    var self = this;

    // On Hover Active
    document.querySelectorAll("a, img, .elementor-custom-embed-image-overlay, button").forEach(function (el) {
      el.addEventListener("mouseover", function () {
        self.cursorEnlarged = true;
        queryCursor.classList.add("active");
      });
      el.addEventListener("mouseout", function () {
        self.cursorEnlarged = false;
        queryCursor.classList.remove("active");
      });
    });
    
    // On Hover Disappears 
    document.querySelectorAll("input, textarea, iframe, video, .footer").forEach(function (el) {
      el.addEventListener("mouseover", function () {
        self.cursorEnlarged = true;
        queryCursor.classList.add("hidden");
      });
      el.addEventListener("mouseout", function () {
        self.cursorEnlarged = false;
        queryCursor.classList.remove("hidden");
      });
    });

    document.addEventListener("mousemove", function (e) {

      self.cursorVisible = true;
      self.toggleCursorVisibility();


      self.endX = e.pageX;
      self.endY = e.pageY;
    });


    document.addEventListener("mouseenter", function (e) {
      self.cursorVisible = true;
      self.toggleCursorVisibility();
      self.$cursor.style.opacity = 1;
    });

    document.addEventListener("mouseleave", function (e) {
      self.cursorVisible = true;
      self.toggleCursorVisibility();
      self.$cursor.style.opacity = 0;
    });
  },

  animateDotOutline: function () {
    var self = this;

    self._x += (self.endX - self._x) / self.delay;
    self._y += (self.endY - self._y) / self.delay;
    self.$cursor.style.top = self._y + "px";
    self.$cursor.style.left = self._x + "px";

    requestAnimationFrame(this.animateDotOutline.bind(self));
  },

  toggleCursorVisibility: function () {
    var self = this;

    if (self.cursorVisible) {
      self.$cursor.style.opacity = 1;
    } else {
      self.$cursor.style.opacity = 0;
    }
  }
};
cursor.init();
 .cursor {
     z-index: 1000;
     pointer-events: none;
     position: absolute;
     top: 50%;
     left: 50%;
     border-radius: 50%;
     opacity: 0;
     transform: translate(-50%, -50%);
     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s, width 0.3s, height 0.3s;
     width: 20px;
     height: 20px;
     background-color: #EBF602;
     display: flex;
     align-items: center;
     justify-content: center;

}
 .cursor.active {
     transform: translate(-50%, -50%) scale(2);
     opacity:0.7 !important;
}
 .cursor.hidden {
     opacity: 0 !important;
}

section{
min-height:100vh;
}
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor"></div>
<section></section>
<section></section>