I have developed a candy-crush like game using react and canvas, but it is not working as expected on mobile devices. I have these listeners:

if (isMobile) {
  canvas.addEventListener('touchstart', onMouseDown);
  canvas.addEventListener('touchend', onMouseUp);
} else {
  canvas.addEventListener('mousemove', onMouseMove);
  canvas.addEventListener('mousedown', onMouseDown);
  canvas.addEventListener('mouseup', onMouseUp);
  canvas.addEventListener('mouseout', onMouseOut);
}

and it works perfectly on desktop. But on mobile devices listener is not being triggered right away after I clicked second time. For example if I want to swap tiles I have to click on any tile and wait for like 1 second to click another one so swap function was triggered. If I click the second tile straight after I've clicked the first one: listener will not be triggered. And it works the same way even with simple console.log function. If I've clicked N times, I will see far less logs in the console.

Here is my FPS control function:

const updateFps = (dt) => {
  if (fpstime > 10) {
    fps = Math.round(framecount / fpstime);

    fpstime = 0;
    framecount = 0;
  }

  fpstime += dt;
  framecount += 1;
};

and here is my animation function:

const main = (tframe) => {
  requestAnimationFrame(main);

  update(tframe);
  render();
};

Is there any way to improve usability on mobile devices? Can it somehow be connected with rerenders of fps limitations?