Leaflet need global window object and as you know on SSR there is no window and it will return an error window is not definded

I searched a lot and the only way to use Leaflet it was to use nextjs dynamic import but i get nothing In my Page

It's been a day I'm searching the web how to solve this and NOTHING worked so far for me.

I Really need an answer for this

Why Map component won't Render?

Map.tsx

import { useState } from "react";
import { MapContainer, TileLayer, Marker, useMapEvents } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import "leaflet-defaulticon-compatibility";

const Map = () => {
  const [position, setPosition] = useState<[number, number]>([51.505, 51.505]);

  // Add Marker on Map onClick
  function Mark() {
    const map = useMapEvents({
      click: ({ latlng }) => {
        setPosition([latlng.lat, latlng.lng]);
      },
    });
    return <Marker position={position} />;
  }

  return (
    <MapContainer
      center={[35.7219, 51.3347]}
      zoom={6}
      scrollWheelZoom={false}
      style={{ height: "50vh" }}
    >
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Mark />
    </MapContainer>
  );
};

export default Map;

my dynamic import

import dynamic from "next/dynamic";
const AdPage = ({ ad }: AdPageProps): JSX.Element => {

  const MapWithNoSSR = dynamic(() => import("./NewAd/map"), {
    ssr: false,
  });

  return (
    <>
            <MapWithNoSSR />
    </>
  );
};

export default AdPage;