React MapBox: Markers moving on Zoom

This question has been asked many times already, but none of the solutions seem to solve the problem.

When I zoom out, all my markers move out of position.

Here is my App.js:

import * as React from "react";
import Map, { Marker } from "react-map-gl";

function App() {
  return (
    <Map
      initialViewState={{
        longitude: -100,
        latitude: 40,
        zoom: 3.5,
      }}
      mapStyle="mapbox://styles/mapbox/streets-v9"
      mapboxAccessToken={process.env.REACT_APP_MAPBOX}
      style={{ width: "100vw", height: "100vh" }}
    >
      <Marker longitude={-100} latitude={40} anchor="bottom">
        <img src="./pin.png"/>
      </Marker>
    </Map>
  );
}

export default App;

and here is index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'mapbox-gl/dist/mapbox-gl.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

There is no extra styling