react-native-gesture-handler: TypeError: Cannot destructure property 'onGestureHandlerStateChange' of 'this.ref.props' as it is undefined.

This is a bug in react native web. I want to detect double tap using TapGestureHandler. It works perfectly fine in Android and iOS but in Web, I get this error:

TypeError: Cannot destructure property 'onGestureHandlerStateChange' of 'this.ref.props' as it is undefined.
TapGestureHandler.GestureHandler.sendEvent
node_modules/react-native-gesture-handler/web/GestureHandler.js:151
  148 | 
  149 | sendEvent = nativeEvent => {
  150 |   const {
> 151 |     onGestureHandlerStateChange: onHandlerStateChange,
      | ^  152 |     onGestureHandlerEvent: onGestureEvent,
  153 |   } = this.ref.props;
  154 | 

Versions

react-native: 0.62.2 react-native-web: 0.13.6 react-native-gesture-handler: 1.7.0

Sample code to generate issue

// Tapper.tsx
import React from 'react';
import {
  State,
  TapGestureHandler,
  TapGestureHandlerStateChangeEvent,
} from 'react-native-gesture-handler';

type Props = {
  onSingleTap?: () => void;
  onDoubleTap?: () => void;
  children: React.ReactNode;
};

const Component: React.FC<Props> = ({ children, onDoubleTap, onSingleTap }) => {
  const doubleTapRef = React.useRef<TapGestureHandler>();
  const handleSingleHandlerStateChange = React.useCallback(
    (event: TapGestureHandlerStateChangeEvent) => {
      if (event.nativeEvent.state === State.ACTIVE) {
        onSingleTap?.();
      }
    },
    [onSingleTap]
  );

  const handleDoubleHandlerStateChange = React.useCallback(
    (event: TapGestureHandlerStateChangeEvent) => {
      if (event.nativeEvent.state === State.ACTIVE) {
        onDoubleTap?.();
      }
    },
    [onDoubleTap]
  );

  return (
    <TapGestureHandler
      onHandlerStateChange={handleSingleHandlerStateChange}
      waitFor={doubleTapRef}
    >
      <TapGestureHandler
        // @ts-ignore
        ref={doubleTapRef}
        onHandlerStateChange={handleDoubleHandlerStateChange}
        numberOfTaps={2}
      >
        {children}
      </TapGestureHandler>
    </TapGestureHandler>
  );
};

Component.displayName = 'Tapper';

export default Component;

Just use this component with any component in web.