react-mapbox-gl markers are not displayed correctly

Question

I have a site with mapbox, the map itself works fine, but I can't add markers to it. I copied the code from one source on which everything works, but when I added it to my project, the markers shifted from the correct coordinates on the map and got even more shifted when approaching.

here's my code

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactMapboxGl, { Layer, Marker } from "react-mapbox-gl";
import { observer } from "mobx-react-lite";
import state from "../../state/state";

const Map = ReactMapboxGl({
    accessToken:
        "pk.eyJ1IjoibmFnaHQiLCJhIjoiY2wyYTJrazZxMDFlbzNpbnp0eTNnOG44aCJ9.i3nyiAJBTDyWviIWhsX-Zg",
});

const IndexMap = observer(({ coordinats }) => {
    return (
        <div style={{ height: "100vh", width: "100%", overflow: "hidden" }}>
            <Map
                style="mapbox://styles/mapbox/streets-v9" // eslint-disable-line
                containerStyle={{
                    height: "100%",
                    width: "100%",
                }}
                center={{
                    lat: 51.5285582,
                    lng: -0.2416815,
                }}
                zoom={[12]}
            >
                <Marker coordinates={[-0.2416815, 51.5285582]} anchor="bottom">
                    <h1>marker</h1>
                </Marker>
            </Map>
        </div>
    );
});
export default IndexMap;

I think there are not enough styles for the map to set them in the right location.

Answer 1

I don't know what the problem was. I just moved the project to the folder with the working file. The link to the folder with the working file -https://codesandbox.io/embed/pwly8?codemirror=1