Guys I need help. Im working on a next.js and react project and im trying to use the google places api. Im usually not a react dev, more c# but I got this project and my friend bought this template so I'm trying to edit it with as little react experience I have. The current error I get is just the google places api not loading, this is the place picker component I have:
// PlacePicker.jsx
"use client";
import { useState, useEffect } from "react";
import { Autocomplete } from "@react-google-maps/api";

export default function PlacePicker() {
const [autocomplete, setAutocomplete] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);

useEffect(() => {
const interval = setInterval(() => {
if (typeof window !== 'undefined') {
window.initMap = () => console.log('Google Maps API loaded successfully');
}
}, 100); // Check every 100 milliseconds

return () => clearInterval(interval);
}, []);

if (!isLoaded) {
return <div>Loading Google Maps...</div>;
}

const onLoad = (autocompleteInstance) => {
console.log("Autocomplete component loaded");
setAutocomplete(autocompleteInstance);
};

const onPlaceChanged = () => {
if (autocomplete) {
console.log(autocomplete.getPlace());
} else {
console.log("Autocomplete is not loaded yet!");
}
};

return (
<Autocomplete
onLoad={onLoad}
onPlaceChanged={onPlaceChanged}
restrictions={{ country: "hr" }}
>
<input
type="text"
placeholder="Enter location"
className="search-input dropdown-location"
/>
</Autocomplete>
);
}