Autocomplete not working

[bsgies]

Hi, community,

I am using this library in NextJS to show Google Maps with a marker and to use Autocomplete. For some reason, the autcomplete doesn't seem to work at all.

My current structure is like this:

const googleMapsLibraries = ['places'] const { isLoaded } = useJsApiLoader({ googleMapsApiKey: "API_KEY", libraries: googleMapsLibraries, }); const [center, setCenter] = useState({ lat: 51.60716225432206, lng: 0.0006820025611930045, }); if (!isLoaded) { return <CircularProgress size={50} thickness={50} />; }

`

      </Grid>
      <Grid item xs={12}>
        <Box
          sx={{
            height: "300px",
          }}
        >
          <GoogleMap
            mapContainerStyle={{
              width: "100%",
              height: "100%",
            }}
            center={center}
            zoom={15}
            options={{
              zoomControl: false,
              streetViewControl: false,
              mapTypeControl: false,
            }}
          >
            <MarkerF
              animation="bounce"
              draggable={true}
              position={center}
              icon={"/img/marker.svg"}
            />
          </GoogleMap>
        </Box>
      </Grid>`

If you notice the screenshot, there are no suggestions for a or ab or abc.

How should I fix it?