2 компонента fabri cjs на одной странице имеют странное поведение жестов (React)

Question

Я использую fabri c - js со сборкой жестов (fabri c -with-gestures) в проекте React (для мобильных браузеров). Я создал простой компонент, который рендерит элемент canvas, а затем (в самом монтировании) добавил изображение на этот холст для поддержки изменения размера и масштабирования. все события касания и жестов, кажется, работают хорошо.

Однако при рендеринге 2 компонентов на одной странице, похоже, что 2-й компонент имеет странное поведение жестов. когда касаются изображения только двумя пальцами, оно сразу уменьшается до очень маленького размера, поэтому его невозможно уменьшить.

Я понятия не имею, почему это происходит только тогда, когда два элемента (или более) на странице , Есть идеи? Я создал проект stackblitz, в котором воспроизведена проблема.

Добавление кода компонента -

import React, { Component } from "react";
import { fabric } from "fabric-with-gestures";
import { TestDataUrl } from "./test";

export class Designer extends Component {
  canvas = React.createRef<HTMLCanvasElement>();

  componentDidMount() {
    const fabricCanvas = new fabric.Canvas(this.canvas.current, {
      controlsAboveOverlay: true,
      allowTouchScrolling: true,
      enableRetinaScaling: false,
      renderOnAddRemove: false
    });
    let angle = 0;

    fabric.Image.fromURL(
      TestDataUrl,
      img => {
        fabricCanvas.add(img);
        fabricCanvas.centerObject(img);
        fabricCanvas.setActiveObject(img);
        fabricCanvas.renderAll();
      },
      {
        originX: "center",
        originY: "center",
        transparentCorners: false,
        hasControls: false,
        hasBorders: false,
        angle: angle
      }
    );
  }

  render() {
    return (
      <canvas
        ref={this.canvas}
        width={200}
        height={600}
        style={{ zIndex: 150 }}
      />
    );
  }
}

Полный проект можно найти здесь - https://stackblitz.com/edit/react-ts-xrjvc8

Спасибо Асаф