@react-google-maps/api's Autocomplete is giving me "This page cant load Google maps correctly"

Question

I am using https://www.npmjs.com/package/@react-google-maps/api to render googlemaps and I am trying to get the Autocomplete to work. https://react-google-maps-api-docs.netlify.app/#autocomplete

When I try to search for a location I get "This page cant load Google maps correctly". The example on their website has the same error.

import React from 'react'
import { GoogleMap, LoadScript, Autocomplete  } from '@react-google-maps/api';

const api = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;

const containerStyle = {
    width: '1200px',
    height: '500px'
};

const center = {
    lat: -3.745,
    lng: -38.523
};

const Gmap = () => {

    return (
        <LoadScript
            googleMapsApiKey ={api}
            libraries={["places"]}
        >
            <GoogleMap
                mapContainerStyle={containerStyle}
                center={center}
                zoom={10}
            >
                { /* Child components, such as markers, info windows, etc. */ }
                <Autocomplete>
                    <input
                        type="text"
                        placeholder="Input"
                        style={{
                            boxSizing: `border-box`,
                            border: `1px solid transparent`,
                            width: `240px`,
                            height: `32px`,
                            padding: `0 12px`,
                            borderRadius: `3px`,
                            boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                            fontSize: `14px`,
                            outline: `none`,
                            textOverflow: `ellipses`,
                            position: "absolute",
                            left: "50%",
                            marginLeft: "-120px",
                            top: "2%"
                        }}
                    />
                </Autocomplete>
                <></>
            </GoogleMap>
        </LoadScript>
    )
}

export default React.memo(Gmap)

You need to use your own Google api key in the Codesandbox.

https://codesandbox.io/s/nice-galileo-zdn1c?file=/src/App.js

Answer 1

Solution(Thanks to @MrUpsidown):

As @MrUpsidown commented my API key was setup wrong. I was getting and ApiNotActivatedMapError in my console. I had to enable Places API in my project.

https://developers.google.com/maps/gmp-get-started#enable-api-sdk