Javascript listener mousemove giving wrong position to custom cursor

Question

I'm pulling a late nighter trying like crazy to get the last bugs out of a site I'm updating & I am just about ready to pull my hair out over this one.

https://thebluehouseny.com/menu/

If you scroll down the page a little, you will see I am implementing a system where the client can upload their own image's for the restaurant's weekly menus. Everything is going swimmingly there, but I am trying to make it so when the user hovers over the left or right side of the menu image, it displays the custom arrow cursor with it's specific direction related class. We're still good there. The problem is two things,

1. The custom cursor (arrow) is not staying within the confines of the menu image area. Seems like a dumb thing, but it is tripping out my OCD watching this custom cursor going outside the image it's supposed to be navigating behind it.
2. And much MUCH more important, and crucial... I can NOT seem to get the custom cursor to display in the proper location. No matter what, it is always offset way to the right and way down from where the actual user's mouse is. No good. This is the bigger of the two requirements that I can't get figured out.

var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        loop: true,
        speed: 0,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
      let cursor = document.querySelector('.arrow-cursor');
      document.addEventListener('mousemove', moveCursor);
      function moveCursor(e) {
        let x = e.clientX;
        let y = e.clientY;

        cursor.style.left = `${x}px`;
        cursor.style.top = `${y}px`;
      }
      let links = Array.from(document.querySelectorAll('.swiper-button-ctrl'));
      links.forEach((link) => {
        link.addEventListener('mouseover', () => {
          if (link.classList.contains('swiper-button-prev')) {
            cursor.classList.remove('cursor-next');
            cursor.classList.add('cursor-prev');
          }
          if (link.classList.contains('swiper-button-next')) {
            cursor.classList.remove('cursor-prev');
            cursor.classList.add('cursor-next');
          }
          cursor.classList.add('active');
        });
        link.addEventListener('mouseleave', () => {
          if (link.classList.contains('swiper-button-prev')) {
            cursor.classList.remove('cursor-prev');
          }
          if (link.classList.contains('swiper-button-next')) {
            cursor.classList.remove('cursor-next');
          }
          cursor.classList.remove('active');
        });
      });

As a sidenote, I have a fully functional codepen version of this. But once I pull everything into wordpress where things are dynamic and there are several more layers of html elements, things go foobar bad.

https://codepen.io/TIBrent/pen/eYXQENy?editors=0110

Above is the area of the javascript where I set up the event listener and call for the custom classes and cursor placement... but ISSUES! :(

Any and ALL help appreciated. The site uses both standard javascript & jQuery. I am still a javascript novice after decades of working with it, I can write it, but sometimes can not wrap my head around it.