Javascript w/ Threejs: How do I normalize coordinates of my cursor object and set the position to match my actual cursor?

Question

Attached JSFiddle: https://jsfiddle.net/wn90tqjy/5/ The full code is in the link and you can see the problem itself.

I made a custom cursor object:

const cursor

And im trying to make the position of this the same position as my actual cursor. Right now im trying to set the position of the cursor object to my actual cursor, but there is some kind of offset to it? In JSFiddle you can see the particles get sucked into a point, that point is the cursor, but as you can see the cursor is not at the position of my actual cursor.

  //set positoin of cursor to be the persons mouse cursor 
  document.addEventListener('mousemove', (event) => {
    cursor.x = (event.clientX / window.innerWidth) * 5  - 3;
    cursor.y = - (event.clientY / window.innerHeight) * 5 + 2;
  });
  
  const animate = function () {
    requestAnimationFrame(animate);
    // Ppush particles away ok 
    const particlePositions = particles.geometry.attributes.position;
    for (let i = 0; i < particlePositions.array.length; i += 3) {
      const particleX = particlePositions.array[i];
      const particleY = particlePositions.array[i + 1];
  
      const distanceSquared = (particleX - cursor.x) ** 2 + (particleY - cursor.y) ** 2;
      const distance = Math.sqrt(distanceSquared);
  
      if (distance <= 0.5) {
        const forceX = (particleX - cursor.x) * pushForce;
        const forceY = (particleY - cursor.y) * pushForce;
  
        particlePositions.array[i] += forceX;
        particlePositions.array[i + 1] += forceY;
      }
    }
  
    //update particles position to get pusheed away
    particles.geometry.attributes.position.needsUpdate = true;
  
    renderer.render(scene, camera);
  };
  
  animate();
  

};

This is the main part of it, I think. I need getting rid of that strange offset from my cursor object so it stays on my actual cursor.

I tried different methods of getting the cursor objects coordinates to match my actual cursors position. Like existing cursor element with normalized coordinates, attempting to use styles directly, Using an HTML element as the cursor.

Everytime it had the offset I can't fix.

  document.addEventListener('mousemove', (event) => {
    cursor.x = (event.clientX / window.innerWidth) * 5  - 3;
    cursor.y = - (event.clientY / window.innerHeight) * 5 + 2;
  });

Changing the *5 - 3;, and * 5 + 2;. put the cursor object closer to my actual cursor which is expected but this is just so you can visualize the problem better, I dont expect the solution to be changing those values, but if it works then ill use it.