How to enlarge gesture area over canvas?

[pRoanoke]

Currently I'm using following code quite similar to instagram Stickers example:

const GestureHandler = ({
  matrix,
  matrixView,
  dimensions,
  debug = true,
  handleSingleTap,
  origin,
  offset,
  handleScaleChange,
}: GestureHandlerProps) => {
  const { x, y, width, height } = dimensions;
  const previousScale = useRef(1);

  const click = Gesture.Tap()
    .runOnJS(true)
    .onStart((e) => {
      handleSingleTap(e, offset.value.get());
    });

  const pan = Gesture.Pan()
    .onBegin((e) => {
      origin.value = Skia.Point(e.x, e.y);
      offset.value = matrix.value;
    })
    .onChange((e) => {
      matrix.value = translate(matrix.value, e.changeX, e.changeY);
      offset.value = matrix.value;
    });

  const pinch = Gesture.Pinch()
    .onBegin((e) => {
      origin.value = Skia.Point(e.focalX, e.focalY);
      offset.value = matrix.value;
    })
    .onChange((e) => {
      matrix.value = scale(offset.value, e.scale, origin.value);
      if (Math.abs(e.scale - previousScale.current) > 0.1) {
        runOnJS(handleScaleChange)(e.scale);
      }
      previousScale.current = e.scale;
    })
    .onEnd((e) => {
      if (matrix.value.get()[0] < 0.6) {
        matrix.value = scale(offset.value, 0.6 / offset.value.get()[0], origin.value);
      }
      runOnJS(handleScaleChange)(matrix.value.get()[0]);
    });

  const style = useAnimatedStyle(() => {
    return {
      position: 'absolute',
      left: x,
      top: y,
      width,
      height,
      backgroundColor: debug ? 'rgba(100, 200, 300, 0.4)' : 'transparent',
      transform: [
        { translateX: -width / 2 },
        { translateY: -height / 2 },
        {
          matrix: toM4(matrixView.value),
        },
        { translateX: width / 2 },
        { translateY: height / 2 },
      ],
    };
  });

  const gesture = Gesture.Race(click, pan, pinch);
  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={style} />
    </GestureDetector>
  );
};

And after I use it as follows:

 <SkiaCanvas
        ref={ref}
        style={{
          height: canvasRect.height,
          width: canvasRect.width,
          overflow: 'hidden',
        }}
      >
        {/*<Fill color="white" />*/}
        <Group matrix={matrixOffset}>
         {...}
        </Group>
      </SkiaCanvas>
      <GestureHandler
        matrix={canvasMatrix}
        matrixView={matrixOffset}
        origin={origin}
        offset={offset}
        dimensions={canvasRect}
        handleSingleTap={handleTap}
        handleScaleChange={setCanvasScale}
      />

But I don't like that behavior that detection zone scales within the associated matrix. What i want is to enlarge detection zone to be able to Pinch and Pan "matrixed" element without need to put fingers in element bounds.

I tried to remove transform property for animated view but it breaks the origin and zooming become unpredictable.

I think I'm just messing around.