How to use the react-native-gesture-handler.State.UNDETERMINED function in react-native-gesture-handler

onPanHandlerStateChange = ({nativeEvent}) => {
        switch (nativeEvent.state) {
        case GestureState.UNDETERMINED:
            console.log('PAN undetermined', nativeEvent.state); // eslint-disable-line no-console
            break;
        case GestureState.FAILED:
            console.log('PAN failed', nativeEvent.state); // eslint-disable-line no-console
            break;
        case GestureState.BEGAN:
            console.log('PAN began', nativeEvent.state); // eslint-disable-line no-console
            break;
        case GestureState.CANCELLED:
            console.log('PAN cancelled', nativeEvent.state); // eslint-disable-line no-console
            break;
        case GestureState.ACTIVE:
            console.log('PAN active', nativeEvent.state); // eslint-disable-line no-console
            break;
        case GestureState.END:
            console.log('PAN end', nativeEvent.state); // eslint-disable-line no-console

}

  private clock = new Clock();

  private isDrawerTypeFront = new Value(
    this.props.drawerType === 'front' ? TRUE : FALSE
  );
  private isGestureEnabled = new Value(
    this.props.gestureEnabled ? TRUE : FALSE
  );

  private isOpen = new Value(this.props.open ? TRUE : FALSE);
  private nextIsOpen = new Value(UNSET);
  private isSwiping = new Value(FALSE);

  private gestureState = new Value(State.UNDETERMINED);
  private touchX = new Value(0);
  private velocityX = new Value(0);
  private gestureX = new Value(0);
  private offsetX = new Value(0);
  private position = new Value(0);

  private containerWidth = new Value(0);
  private drawerWidth = new Value(0);
  private drawerOpacity = new Value(0);
  private drawerPosition = new Value(
    this.props.drawerPosition === 'right' ? DIRECTION_RIGHT : DIRECTION_LEFT
  );

  // Comment stolen from react-native-gesture-handler/DrawerLayout
  //
  // While closing the drawer when user starts gesture outside of its area (in greyed

export default () => {
  const y = new Value(initialWaveCenter);
  const translationX = new Value(0);
  const velocityX = new Value(0);
  const state = new Value(State.UNDETERMINED);
  const gestureHandler = onGestureEvent({
    translationX,
    velocityX,
    y,
    state
  });
  const isBack = new Value(0);
  const gestureProgress = cond(
    isBack,
    interpolate(translationX, {
      inputRange: [0, width - initialSideWidth],
      outputRange: [1, 0]
    }),
    interpolate(translationX, {
      inputRange: [-width, initialSideWidth],
      outputRange: [0.4, 0]

export default ({ onPress, children }: TapProps) => {
  const state = new Value(State.UNDETERMINED);
  const onGestureEvent = event([
    {
      nativeEvent: {
        state
      }
    }
  ]);
  useCode(block([cond(eq(state, State.END), onPress)]), [onPress]);
  return (
    
      {children}
    
  );

export default () => {
  const translationY = new Value(0);
  const velocityY = new Value(0);
  const state = new Value(State.UNDETERMINED);
  const offset = new Value(SNAP_BOTTOM);
  const goUp: Animated.Value<0 | 1> = new Value(0);
  const goDown: Animated.Value<0 | 1> = new Value(0);
  const gestureHandler = onGestureEvent({
    state,
    translationY,
    velocityY
  });
  const translateY = withSpring({
    value: translationY,
    velocity: velocityY,
    offset,
    state,
    snapPoints: [SNAP_TOP, SNAP_BOTTOM],
    config
  });

  const panState = useMemo(() => new Value(State.UNDETERMINED), []);
  const onPan = useMemo(() =>

const { dragX, dragY, panState, translateY, translateX } = useState(() => {
    const dragX = new Value(0)
    const dragY = new Value(0)
    const panState = new Value(GestureState.UNDETERMINED)

    return {
      dragX,
      dragY,
      panState,
      translateX: withOffset(dragX, panState),
      translateY: withOffset(dragY, panState)
    }
  })

  const animState = useMemo(() => new Value(State.UNDETERMINED), []);
  const appState = useMemo(() => new Value("initialAppState"), []);

readonly thumbSize?: number
  readonly initialHue?: number
  readonly initialSaturation?: number
  readonly initialValue?: number
}

type State = {
  readonly value: Animated.Node
  readonly valueGestureState: Animated.Node
}

export class HueSaturationValuePicker extends React.PureComponent {

  state: State = {
    value: new Animated.Value(1),
    valueGestureState: new Animated.Value(GestureState.UNDETERMINED)
  }

  render() {
    const {
      wheelStyle,
      sliderStyle,
      thumbSize,
      snapToCenter,
      initialHue,
      initialValue,
      initialSaturation,
      onColorChange,
      onColorChangeComplete
    } = this.props
    const { value, valueGestureState } = this.state

function gestureStateFromEnum(s) {
  switch (s) {
    case State.UNDETERMINED:
      return 'UNDETERMINED';
    case State.BEGAN:
      return 'BEGAN';
    case State.FAILED:
      return 'FAILED';
    case State.CANCELLED:
      return 'CANCELLED';
    case State.ACTIVE:
      return 'ACTIVE';
    case State.END:
      return 'END';
    default:
      return `Invalid gesture state: ${s}`;
  }
}