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 item xs={12}> <Autocomplete> <InputField fullWidth label={t("address_label")} placeholder={t("address_placeholder")} type="text" className="os" /> </Autocomplete> </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?