How to make my custom cursor clickable?

Hello !

I have a custom cursor, but it is not clickable and I don’t know why…

here is the “Inside tag” :

<style>

	canvas {
  	pointer-events: none;
  }

</style>

and the “Before tag” :

<script>

	let canvas = document.querySelector('canvas');  
  let c = canvas.getContext('2d');
  
  let mousePositions = [];
  let lastMousePosition = {
  	x: undefined,
    y: undefined
  }
  let collectMousePositionTimerElapsed = false;
  
  let collectMousePositionTimer = setInterval(function() {
  	collectMousePositionTimerElapsed = true;
  }, 100);
  
  let mouseIsStoppedTimer;
  
  canvas.width = innerWidth;
  canvas.height = innerHeight;
  
  c.strokeStyle = "#86b2bb";
  c.lineWidth = 2;
  
  window.addEventListener('mousemove', function(event) {
  	
    lastMousePosition = {
  		x: event.x,
    	y: event.y
  	}
    
    clearTimeout(mouseIsStoppedTimer);
    mouseIsStoppedTimerElapsed = false;
    
    mouseIsStoppedTimer = setTimeout(function() {
    	
      if(mousePositions.length == 10)
    		mousePositions.shift();
    
    	mousePositions.push(lastMousePosition);
      
    }, 100);
  
  	if(collectMousePositionTimerElapsed)
    { 
    	collectMousePositionTimerElapsed = false;
    
    	if(mousePositions.length == 10)
    		mousePositions.shift();
    
    	mousePositions.push({
  			x: event.x,
    		y: event.y
  		});
    }
  });
  
  function animate() {
  	requestAnimationFrame(animate);
    
    c.clearRect(0, 0, innerWidth, innerHeight);
    
    if(mousePositions.length <= 0)
    	return;
    
    c.beginPath();
  	c.moveTo(mousePositions[0].x, mousePositions[0].y);
    
    for(let i = 1; i < mousePositions.length; i++)
  		c.lineTo(mousePositions[i].x, mousePositions[i].y);
  	
  	c.stroke();	
  }
  
  animate();

</script>

Here is my site Read-Only:

https://preview.webflow.com/preview/erdems-design?utm_medium=preview_link&utm_source=designer&utm_content=erdems-design&preview=066ab39d27efa21bd205bf8195291cd3&workflow=preview