Google Maps JavaScript API error: Invalid Key Map Error https://developers.google.com/maps

Question

Issue with react-google-autocomplete package: Input box disabled when typing city name

In my React.js project, I'm using the react-google-autocomplete package to integrate the Google location API. However, I'm encountering an issue where the input box becomes disabled when I attempt to type in a city name or any character.

Here's how I've implemented the Autocomplete component:

import Autocomplete from "react-google-autocomplete";

<Autocomplete
   apiKey={locApiKey}
   onPlaceSelected={(place) => { console.log(place); }}
/>

I've also attempted to use the usePlacesWidget hook with a ref, but it doesn't resolve the issue:

const { ref: bootstrapRef } = usePlacesWidget({
   apiKey: {api_key},
   onPlaceSelected: (place) => console.log(place),
})

Additionally, I've included the Google Maps JavaScript API script in my index.html:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=api_key&libraries=geometry">
</script>

Despite these efforts, the input box remains disabled when trying to input a city name or any character.

Any insights or suggestions on how to resolve this issue would be greatly appreciated. Thank you!