React leaflet. map is not showing

Question

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='&copy; <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:

the problem is with the vite. i have wrote the same code using create-react app, it worked. so the main problem right now is what to do for vite and i have no idea. this is the vite.config.js file

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
    },
  },
})