How to use the react-native-gesture-handler/touchables/TouchableOpacity.default function in react-native-gesture-handler

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { useSelector, useDispatch } from "react-redux";
import { PAGE, resetTime } from "../store/filters";
import { BLUE } from "../utils/Colors";
import { Entypo } from "@expo/vector-icons";
import { WEB } from "../utils/Constants";
import _ from "lodash";
import emitter from "tiny-emitter/instance";
import { searchTimeSelector, getTime } from "../store/events";

const TouchableOpacity = WEB
  ? require("react-native").TouchableOpacity
  : require("react-native-gesture-handler/touchables/TouchableOpacity").default;

const buttonHeight = WEB ? 36 : 44;

export { buttonHeight };

export default () => {
  const dispatch = useDispatch();
  const time = useSelector(searchTimeSelector);
  const place = useSelector(state => {
    const city = state.events.city;
    const locationEnabled = state.permissions.location;
    const locationText =
      city && city.text.length
        ? city.text.split(",")[0]
        : locationEnabled || locationEnabled === null
        ? "Locating"

import React, { useCallback } from "react";
import { View, Text, StyleSheet } from "react-native";
import { useDispatch } from "react-redux";
import { BLUE } from "../utils/Colors";
import * as Events from "../store/events";
import { WEB } from "../utils/Constants";
import { roundedDistanceTo } from "../utils/Locate";

export const itemHeight = 36;

const TouchableOpacity = WEB
  ? require("react-native").TouchableOpacity
  : require("react-native-gesture-handler/touchables/TouchableOpacity").default;

export default ({ item, index }) => {
  const dispatch = useDispatch();
  const onPress = useCallback(() => {
    dispatch(Events.getCity(item));
  }, [item]);
  const [city, state] = item._source.name.split(",");
  const subtext = state.trim();
  const distance = roundedDistanceTo(item);
  return (