Sprites apparently clickable only in upper half

I’m trying to make clickable sprites based on PNG images like the following

However the sprites seem to be only clickable in their upper half, and slightly above.
Furthermore, The problem seems to diminish as the scale of the sprites increases.
What is happening here?

Here are the scene and camera setup

    async function init() {
      scene = new THREE.Scene();
      scene.background = new THREE.Color(0x000000);

      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);

      renderer.domElement.addEventListener('pointerdown', onPointerMove);

      camera = new THREE.PerspectiveCamera(
        window.innerWidth / window.innerHeight,
      camera.position.set(0, 3, 3);

    const raycaster = new THREE.Raycaster();
    const pointer = new THREE.Vector2();
    const mouse = new THREE.Vector2();

Here is how I define the sprites

    const map = new THREE.TextureLoader().load('greenPinpoint.png');
    const material = new THREE.SpriteMaterial({color: color, map: map, sizeAttenuation: false});
    const sprite = new THREE.Sprite(material);
    sprite.position.copy(firstPoint).add(new THREE.Vector3(0, 1e-2, 0));
    sprite.scale.set(10e-2, 10e-2, 10e-2);

Here is how I set the raycaster in the event handler

    function onPointerMove(event) {
      pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
      pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;

      raycaster.setFromCamera(pointer, camera);