How to make mouse trigger my object

Questions
,
1

I’m trying to make some particles interaction using Raycaster, but the problem is it works … but not as expected, is does not trigger my object :
ezgif.com-gif-maker

how can i make my object only interact when the mouse hover it please ?
my code :

var uniforms = {
      mouse: {
        value: new THREE.Vector3(),
      },
      radius: {
        value: 1.5,
      },
    };

    material.onBeforeCompile = (shader) => {
      shader.uniforms.mouse = uniforms.mouse;
      shader.uniforms.radius = uniforms.radius;
      // console.log(shader.vertexShader);
      shader.vertexShader =
        `
    	uniform vec3 mouse;
      uniform float radius;
    ` + shader.vertexShader;
      shader.vertexShader = shader.vertexShader.replace(
        `#include <begin_vertex>`,
        `#include <begin_vertex>

         vec3 seg = position - mouse;
        vec3 dir = transformed - mouse;

        float dist = length(seg);

        if (dist < 1.){
          float ratio = 1. - dist / radius;

          vec3 shift = dir * 2. * (ratio * ratio);

          transformed += shift;
        }

      `
      );
    };

    var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector3();
    console.log(uniforms.mouse);
    window.addEventListener("mousemove", (event) => {
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = (event.clientY / window.innerHeight) * 2 + 1;
      raycaster.setFromCamera(mouse, camera);

      raycaster.ray.intersectPlane(plane, uniforms.mouse.value);
    });

Thank you.

to see the full code : https://codepen.io/Imsenji/pen/QWOBMWN?editors=0010