эта ошибка выскакивает TypeError: undefined не является конструктором при установке нового состояния со значением (State.UNDETERMINED) TapGestureHandler на выставке

Question

Я пытаюсь анимировать активный лист, который будет скользить в нижней части экрана после того, как я нажму Анимированное изображение, обернутое с помощью TapGestureHandler, установив начальное значение в значение Value (State.UNDETERMINED, поэтому я могу обновить и удалить элемент в плоском списке на expo

Сообщение об ошибке undefined не является конструктором (оценивает 'new _reactNativeReanimated.Value (_reactNativeGestureHandler.State.UNDETERMINED)')

'use strict';
import React, { useState, useEffect } from 'react';
import {
  Image,
  View,
  SafeAreaView,
  StatusBar,
  FlatList,
  Dimensions
} from 'react-native';
import {
  GetUserCarEndpoint,
  getProfile,
  getUserDetails,
  getRouteToken,
} from '../Utils/Utils';
import { useNavigation } from 'react-navigation-hooks';
import Animated, {
  useCode, cond, Value, eq, set, not, interpolate,
} from "react-native-reanimated";
// import { withTransition } from "react-native-redash";
import { TapGestureHandler, State } from "react-native-gesture-handler";

const SelectCar = () => {

  const state = new Value(State.UNDETERMINED); // first state of a handler when it start off
  // const isOpen = new Value(0);
  // const transition = withTransition(isOpen);
  const translateY = new Animated.Value(300);
  const { navigate, goBack } = useNavigation();
  const [showLoading, setShowLoading] = useState(false),
    [showAlert, setShowAlert] = useState({
      showAlert: false,
      showSuccessAlert: false,
      errorMessage: ''
    }),
    [token, setToken] = useState(''),
    [data, setData] = useState([{ id: 1, name: 'Honda', plateNo: 'PLA555' }, { id: 1, name: 'Tesla', plateNo: 'jjn1234' }]);

  useEffect(() => {
    checkUserDetails();
  }, []);

  const checkUserDetails = async () => {

    }
  };


  const handleBackPress = () => {
    return navigate('Navigations');
  };
  const handleSelectPackage = () => {
    return navigate('SelectPackage')
  }

  // translateY = interpolate(transition, {
  //   inputRange: [0, 1],
  //   outputRange: [300, 0],
  // });

  // const zIndex = interpolate(translateY, {
  //   inputRange: [0, 299, 300],
  //   outputRange: [1, 1, -1],
  // });


  const renderRow = ({ item }) => {
    return (
      <View style={styles.flatlistView}>
        <TouchableOpacity onPress={handleSelectPackage} style={styles.imageView}>
          <Image
            onPress={handleSelectPackage}
            source={{ uri: item.image }}
            style={StyleSheet.flatten(styles.styleImage)}
          />
        </TouchableOpacity>
        <TouchableOpacity onPress={handleSelectPackage} style={styles.carDetailsView}>
          <DisplayText
            text={item.name}
            onPress={handleSelectPackage}
            styles={styles.carheaderTxt}
          />
          <DisplayText
            text={item.model}
            onPress={handleSelectPackage}
            styles={styles.modelTxt}
          />
          <DisplayText
            onPress={handleSelectPackage}
            text={item.plate}
            styles={styles.plateNoTxt}
          />
        </TouchableOpacity>
        <TapGestureHandler {...gestureHandler}>
          <Animated.View>
            <Image
              style={styles.updatePackImg}
              onPress={() => deleteUpdatePackage(item)}
              source={require('../../assets/images/overflow.png')}
            />
          </Animated.View>
        </TapGestureHandler>
      </View>
    )
  }
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle='dark-content' />

      <View style={styles.wrapper}>
        <View style={{ height: '100%', }}>
          <FlatList
            data={data}
            horizontal={false}
            renderItem={renderRow}
            keyExtractor={data => data.id.toString()}
            showsVerticalScrollIndicator={false}
          />
        </View>

      <AnimatedBottomSheet
        // zIndex={zIndex}

        // gestureHandler={{
        //   onHandlerStateChange: Animated.event([
        //     {
        //       nativeEvent: { state },
        //     },
        //   ]),
        // }}

        translateY={translateY}
      ></AnimatedBottomSheet>
    </SafeAreaView>
  );
};

export default SelectCar;