I have been trying to create a map section in my website for at least an hour now, but the react-leaflet or leaflet just won’t work at all. I do every step that the doc says, I have watched a lot of videos, checked the other questions on the website and tried them, and I’m pretty sure that I do everything correct but it is the same for me. My computer has no problem, all necessary libs are installed in case you may ask (I’m using vite).
i was expecting this result
Please, don’t hesitate to tell me what may cause this irritating problem if you know.

this is the component.

import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

const position = [40, 0];

export default function ContactLocation() {
  return (
    <section>
      <div className="container max-w-full h-[600px]">
        <MapContainer
          center={position}
          zoom={15}
          scrollWheelZoom={true}
          className="h-[80vh]"
        >
          <TileLayer
            attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={position}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>
      </div>
    </section>
  );
}

this is the result

here is the versions of the libs in case needed

“leaflet”: “^1.9.4”
“react-leaflet”: “^4.2.1”