Маркер не показывает @react-google-maps/api на локальном хосте next.js

Я знаю, что есть похожие вопросы на этот... но никто не ответил на мой вопрос

Я пытаюсь добавить маркер на свою карту Google, но он не отображается, когда я запускаю проект локально (он отлично работает, когда я работаю на своем сайте).

Вот мой компонент

import { React, useMemo } from "react";
import { GoogleMap, Marker, useJsApiLoader } from "@react-google-maps/api";
import MapContainerStyles from "./styles/MapContainerStyles";
const Map = () => {
const { isLoaded } = useJsApiLoader({
googleMapsApiKey: API_KEY,
});
const center = useMemo(() => ({ lat: -30.292038, lng: 153.118896 }), []);
const onLoad = (marker) => {
console.log("marker: ", marker);
};
const options = {
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
};
if (!isLoaded) return <div>Loading...</div>;
return (
<GoogleMap zoom={15} options={options} center={center} mapContainerClassName="map-container">
<Marker onLoad={onLoad} position={center} />
</GoogleMap>
);
};
export default Map;


Журналы консоли для маркеров onLoad возвращают следующее

В консоли ошибок нет

Я просмотрел несколько ресурсов, и кажется, что я все делаю правильно... но маркер просто не отображается

любая помощь будет оценена

Решение проблемы

У меня была такая же проблема при использовании@react-google-maps/api@2.10.2

Чтобы решить проблему, я понизился до@react-google-maps/api@2.7.0