How to make mouse events in Matter.js more responsive?

So i've been attempting at creating a ball dribbling game but thus the game isn't as responsive as i want it to be. The mouse events aren't always triggered especially in touch devices. Here is the code below.

window.onload = function() {

  var Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Mouse = Matter.Mouse,
  MouseConstraint = Matter.MouseConstraint,
  Events = Matter.Events,
  Bodies = Matter.Bodies,
  Body = Matter.Body;

  var options = {
    friction: 0.5,
    restitution: 0.8,
    label: 'ball'
  };

  var canvas = document.querySelector('canvas'),
  cWidth = canvas.offsetWidth,
  cHeight = canvas.offsetHeight;

  var engine = Engine.create();

  var render =  Render.create({
      canvas: canvas,
      engine: engine,
      options: {
        width: cWidth,
        height: cHeight
      }
  });

  engine.world.gravity.y = 6;

  const margin = 31;

  var ballShape = Bodies.circle(200, 200, 80, options);
  var ground = Bodies.rectangle(cWidth / 2, cHeight + margin, cWidth, 60, { isStatic: true, restitution: -2, label: 'ground' });
  var leftWall = Bodies.rectangle(-1 * margin, cHeight, 60, cHeight * 4, { isStatic: true });
  var rigthWall = Bodies.rectangle(cWidth + margin, cHeight, 60, cHeight * 4, { isStatic: true });

  World.add(engine.world, [ballShape, ground, leftWall, rigthWall]);

  var canvasMouse = Mouse.create(document.querySelector('canvas'));

  var mConstraint = MouseConstraint.create(engine, { mouse: canvasMouse });

  Events.on(mConstraint, "mousedown", function(event) {

    console.log(mConstraint, event);

    let x, y, ball = mConstraint.body;

    if(typeof ball == 'undefined' || ball == null) return;
    if(ball.label === 'Rectangle Body') return;

    Body.setVelocity(ball, { x: ball.velocity.x, y: 0 });

    x = (ball.position.x - event.mouse.mousedownPosition.x) / 70;

    Body.applyForce(ball, { x: ball.position.x, y: ball.position.y }, { x, y: -2 });

  });

  Events.on(mConstraint, "mouseup", function(event) {

    let x, y, ball = mConstraint.body;

    if(typeof ball == 'undefined' || ball == null) return;
    else if(ball.label === 'Rectangle Body') return;

    Body.setVelocity(ball, { x: ball.velocity.x, y: 0 });

    x = (ball.position.x - event.mouse.mousedownPosition.x) / 70;

    Body.applyForce(ball, { x: ball.position.x, y: ball.position.y }, { x, y: -2 });

  });

  Events.on(engine, 'collisionStart', function(event) {
    console.log(event);
  });

  Engine.run(engine);

  Render.run(render);

}

I thought maybe the Game loop was slow and thus the click events are somehow not registering but i searched the documentation and found that the renderer runs on 60FPS by default. if anyone encountered such a problem before i would thankful for his/her help. To recap and summarize, my problem is click events on a fast moving matter.js bodies.

You can find the Game hosted on this link: https://mosmekawy-dribble-ball.glitch.me