I have this scrabber component taht i took from the internet and i really like its functionality but it does not work on mobile. I tried doing it with an onclick function but that is not really user-friendly. All help is welcome thanks!

I kind off adjusted some things so that i cluld reuse it in like a map function to dispaly multiple ones.

import { useEffect, useRef } from "react";

const Crabber = ({ urlVoor, urlAchter, description }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    let canvas = canvasRef.current;
    let context = canvas.getContext("2d");
    let brushRadius = (canvas.width / 100) * 5;

    if (brushRadius < 50) {
      brushRadius = 50;
    }

    let img = new Image();
    img.onload = function () {
      context.drawImage(img, 0, 0, canvas.width, canvas.height);
    };
    img.src = urlVoor;

    function detectLeftButton(event) {
      if ("buttons" in event) {
        return event.buttons === 1;
      } else if ("which" in event) {
        return event.which === 1;
      } else {
        return event.button === 1;
      }
    }

    function getBrushPos(xRef, yRef) {
      var canvasRect = canvas.getBoundingClientRect();
      return {
        x: Math.floor(
          ((xRef - canvasRect.left) / (canvasRect.right - canvasRect.left)) *
            canvas.width
        ),
        y: Math.floor(
          ((yRef - canvasRect.top) / (canvasRect.bottom - canvasRect.top)) *
            canvas.height
        ),
      };
    }

    function drawDot(mouseX, mouseY) {
      context.beginPath();
      context.arc(mouseX, mouseY, brushRadius, 0, 2 * Math.PI, true);
      context.fillStyle = "#000";
      context.globalCompositeOperation = "destination-out";
      context.fill();
    }

    canvas.addEventListener(
      "mousemove",
      function (e) {
        var brushPos = getBrushPos(e.clientX, e.clientY);
        var leftBut = detectLeftButton(e);
        if (leftBut == 1) {
          drawDot(brushPos.x, brushPos.y);
        }
      },
      false
    );

    canvas.addEventListener(
      "touchmove",
      function (e) {
        e.preventDefault();
        var touch = e.targetTouches[0];
        if (touch) {
          var brushPos = getBrushPos(touch.pageX, touch.pageY);
          drawDot(brushPos.x, brushPos.y);
        }
      },
      false
    );
  }, []);

  return (
    <figure id="bridgeContainer" className="text-center font-sans m-4">
      <canvas
        ref={canvasRef}
        id="bridge"
        width="auto"
        height="400"
        className="block mx-auto bg-center bg-contain cursor-crosshair rounded-2xl "
        style={{
          backgroundImage: `url('${urlAchter}')`,
          backgroundSize: "contain",
        }}
      ></canvas>
      <figcaption className="mt-6">{description}</figcaption>
    </figure>
  );
};

export default Crabber;