React Leaflet creating multiple maps

Question

I am trying to create a map, but for some reason multiple maps are being displayed. I am not sure what is causing this.

App.js:

import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
const position = [51.505, -0.09]

function Map() {
  return (
    <div className="map">
      <MapContainer
        center={position}
        zoom={100}
        scrollWheelZoom={false}
      >
        <TileLayer
          attribution='Some random text'
          url="http://blog.damonpollard.com/wp-content/uploads/2013/09/GTAV_ATLUS_4096x4096.png"
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div >
  );
}

export default Map;

index.css:

.leaflet-container {
  width: 100%;
  height: 100vh;
}

Answer 1

If you have a single (non tiled) image as map, use it as an Image Overlay instead of as a Tile Layer.