Make the custom cursor grow when ‘mouseover’ menu pages [closed]

I really hope that you can help with this one.

I have made a custom cursor and I want it to grow when it hovers over the main menu pages and pretty much every link on the site. I am using an event listener with ‘mouseover’ and ‘mouseleave’ but I can’t get it to work. I am trying to get the main menu pages with the class ‘menu-link’ as shown in the developer tools in Chrome, but it doesn’t work.

The 2nd problem that I have is that I cant remove the pointer when pointing a link. "pointer-events:none: doesn’t work…
I am using Elementor Pro as a builder. I am also implementing the code with it.
Here is a link to the problem: http://webwork1.eu/test-2/

Here is the HTML and JS code:

<div class="cursor" id="customcursor">
    <svg
    class="clockwiseSpin"
    id="Layer_1"
    data-name="Layer 1"
    xmlns="http://www.w3.org/2000/svg"
    viewbox="0 0 99.97 113.28"
  >
    <defs>
      <style>
        .cls-1 {
          fill: #0db14b;
                        pointer-events: none;
                        pointer-events: stroke;  
        }
      </style>
    </defs>
    <path
      class="cls-1"
      d="M103.4,51.28a1.51,1.51,0,0,1-1.37-.86A43.81,43.81,0,0,0,66.69,26.31,43.32,43.32,0,0,0,34.43,36.64a1.53,1.53,0,1,1-2-2.33A46.42,46.42,0,0,1,67,23.25a46.91,46.91,0,0,1,37.83,25.82,1.53,1.53,0,0,1-.7,2A1.51,1.51,0,0,1,103.4,51.28Z"
      transform="translate(-15.83 -12.04)"
    />
    <path
      class="cls-1"
      d="M114.26,48.46a1.55,1.55,0,0,1-1.4-.91A54.95,54.95,0,0,0,42.8,18.85,1.53,1.53,0,0,1,41.69,16a58,58,0,0,1,74,30.31,1.53,1.53,0,0,1-.78,2A1.68,1.68,0,0,1,114.26,48.46Z"
      transform="translate(-15.83 -12.04)"
    />
    <path
      class="cls-1"
      d="M63,114.3c-1.35,0-2.7-.06-4.06-.17a46.73,46.73,0,0,1-33.71-19A1.54,1.54,0,0,1,25.55,93a1.53,1.53,0,0,1,2.14.34A43.74,43.74,0,0,0,96,96.19a1.53,1.53,0,0,1,2.32,2A46.79,46.79,0,0,1,63,114.3Z"
      transform="translate(-15.83 -12.04)"
    />
    <path
      class="cls-1"
      d="M63.08,125.33c-1.72,0-3.46-.08-5.2-.23a57.88,57.88,0,0,1-41.76-23.53,1.54,1.54,0,1,1,2.48-1.81,54.89,54.89,0,0,0,91.06-3.63,1.53,1.53,0,1,1,2.62,1.59A57.28,57.28,0,0,1,63.08,125.33Z"
      transform="translate(-15.83 -12.04)"
    />
  </svg>
    </div>
    <script type="text/javascript">
    const customcursor = document.getElementById("customcursor");
    const moveCursor = event => {
      const cursorWidth = customcursor.offsetWidth / 2;
      customcursor.style.left = event.pageX + "px";
      customcursor.style.top = event.pageY + "px";
    };
    document.addEventListener("mousemove", moveCursor);


    let mouseCursor = document.querySelector('.cursor');    
    let menuLinks = document.querySelectorAll('.menu-item');

    menuLinks.forEach(link => {
        link.addEventListener('mouseleave',() => {
            mouseCursor.classList.remove('link-grow');
        })
        link.addEventListener('mouseover',() => {
            mouseCursor.classList.add('link-grow');
        });
    })
    ;
    </script>

And the CSS:

@media only screen and (min-width: 1367px) {
body {cursor:none;}



#Layer_1 {
    pointer-events: none;
}
#customcursor {
z-index:1000000;
width: 3rem;
height: 3rem;
border: transparent;
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
pointer-events: none;
transition: all 0.3s ease;
transition-property: background, transform;
transform-origin: 100% 100%;
animation: grow-shrink 4s infinite alternate;
}

.link-grow {
transform: scale(2);
    }

.clockwiseSpin {
animation-duration: 10s;
animation-iteration-count: infinite;
animation-name: clockwiseSpin;
animation-timing-function: linear;
    }

    @keyframes clockwiseSpin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    }