OverflowY is interfering with Pan Gestures

CodeSandbox Link: https://codesandbox.io/embed/hammerjsdraggeroverflowybug-wqhoe

Pan gestures are working well when there's no overflowY CSS property applied on the DOM element. But as soon as I set overflowY property to anything other than initial, it breaks the gestures.

Also, a very bizarre thing happens, the value of deltaY and deltaX increases abruptly in the end, can't find the reason for this. But if I remove overflowY property from the elements, it fixes. Reproducible in CodeSandbox, open in mobile mode only using devtools.

    const hammered = new Hammer(el, { domEvents: false });
       hammered.get("pan").set({
         direction: Hammer.DIRECTION_VERTICAL,
         threshold: 0
    });

    const onPanStart: HammerListener = e => {
      document.body.style["overscroll-behavior"] = "contain";
    };

    const onPanMove: HammerListener = e => {

      const distance = e.distance;
      console.warn(distance, upperLimit, e);
      if (Math.abs(distance) < Math.abs(upperLimit)) {
        const movement = isDockedUp ? -(upperLimit - distance) : e.deltaY;
        el.style.transform = `translateY(${movement}px)`;
      }
    };

    const onPanEnd: HammerListener = e => {
      if (shouldPerformTouchGesture && !shouldPerformTouchGesture(e)) {
        return;
      }
      //   el.style.transition = "transform 0.1s ease-out";
      document.body.style["overscroll-behavior"] = "auto";
      if (e.distance > Math.abs(upperLimit / 2)) {
        el.style.transform = `translateY(${isDockedUp ? 0 : -upperLimit}px)`;
        isDockedUp = !isDockedUp;
      } else {
        el.style.transform = `translateY(${isDockedUp ? -upperLimit : 0}px)`;
      }

Please suggest a solution to this problem. Are overflowY and touch gestures incompatible with each other? Couldn't find any reference.

hammerjs / hammer.js

OverflowY is interfering with Pan Gestures #1234