How to show currentLocation using GooglePlacesAutocomplete in expo project

Question

I have created an expo project using npx create-expo-app test. I have installed below packages:

npx expo install expo-location
npx expo install react-native-google-places-autocomplete

Below is my package.json:

{
  "name": "test",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~49.0.5",
    "expo-location": "~16.1.0",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.3",
    "react-native-google-places-autocomplete": "^2.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

Below is my App.js that make use of GooglePlacesAutocomplete:

import { SafeAreaView, StyleSheet } from "react-native";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
import * as Location from "expo-location";
import { useEffect, useState } from "react";
navigator.geolocation = require("expo-location");

export default function App() {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        setErrorMsg("Permission to access location was denied");
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  let text = "Waiting..";
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = JSON.stringify(location);
  }
  const homePlace = {
    description: "Home",
    geometry: { location: { lat: 48.8152937, lng: 2.4597668 } },
  };
  const workPlace = {
    description: "Work",
    geometry: { location: { lat: 48.8496818, lng: 2.2940881 } },
  };

  return (
    <SafeAreaView style={styles.container}>
      <GooglePlacesAutocomplete
        placeholder="Search"
        minLength={2} // minimum length of text to search
        autoFocus={false}
        returnKeyType={"search"} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
        listViewDisplayed="auto" // true/false/undefined
        currentLocation={true}
        currentLocationLabel="Current location"
        nearbyPlacesAPI="GooglePlacesSearch" // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
        predefinedPlaces={[homePlace, workPlace]}
        fetchDetails={true}
        renderDescription={(row) => row.description} // custom description render
        onPress={(data, details = null) => {
          console.log(data);
        }}
        query={{
          // available options: https://developers.google.com/places/web-service/autocomplete
          key: "GOOLE_API_KEY",
          language: "en", // language of the results
        }}
        styles={{
          container: {
            flex: 1,
            width: "100%",
          },
          textInput: {
            backgroundColor: "#1faadb",
          },
        }}
        debounce={200}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

I have also accepted the permissions to retrieve user location from my IOS real device. The Current location label of the prop currentLocationLabel is shown correctly in the input text after adding navigator.geolocation = require("expo-location");.

My issue is that when I press on the Current location label from the input text, the application crash with below message:

ERROR  TypeError: Cannot read property 'getCurrentPosition' of undefined, js engine: hermes

How can I make sure the currentLocation label from the predefinedPlaces is retrieving the current location when I pressed on it ?