Не может добавить маркер для правильной позиции. карта с Mapbox JS ⇐ Javascript

[Anonymous]

Это должен быть довольно прямой Foward, но он не работает, как ожидалось. Я хочу добавить маркер, где пользователь нажимает на карту. Но маркер далеко от того места, где я щелкнул, и я не знаю, почему. Кроме того, элементы управления, которые я добавляю с map.addcontrol (new Mapboxgl.navigationControl (), "Top-Right"); также не отображается.
const MyMap = () => {
const mapRef = useRef(null)

useEffect(() => {
if (!mapRef.current) return;
mapboxgl.accessToken = "...";
const map = new mapboxgl.Map({
container: mapRef.current,
style: "mapbox://styles/mapbox/dark-v11",
center: [-74.0060152, 40.7127281],
zoom: 5,
maxZoom: 15,
});

map.on("load", () => {
map.addControl(new mapboxgl.NavigationControl(), "top-right");
map.on("click", event => {
const {lngLat: {lng, lat}} = event
new mapboxgl.Marker()
.setLngLat([lng, lat])
.addTo(map);
});
});
return () => map.remove();
}, []);

return




}
< /code>
И это CSS < /p>
.protected-container {
width: 100%;
height: calc(100% - ...);
}

.container {
height: 100%;
overflow-y: auto;
}

.map {
width: 100%;
position: relative;
height: 50%;
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... -mapbox-js