title: Next js with react-leaflet window is not defined when refreshing page
body: <p>im using react-leaflet in Next js but when reloading page shows &quot;window is not defined&quot; even i am using dynamic import with ssr:false,
  i saw this question made by others here and tried answers that they offered but didn't work, also tried to make the map mounted after component but again no result,
  my code:</p>
  <pre><code>function ContactPage() {
      const MapWithNoSSR = dynamic(() =&gt; import('../Map/Map'), {
          ssr: false,
      })
      return (
          &lt;div className={styles.map}&gt;
              &lt;MapWithNoSSR/&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <hr />
  <pre><code>function Map(){
  
  const [markers, setMarkers]= useState([
          {cord:[12.3774729,20.446257]},
          {cord:[45.3774729,10.45224757]},
          {cord:[40.3774729,15.4364757]},
      ])
  
  &lt;MapContainer center={[12.374729,22.4464757]} zoom={13} scrollWheelZoom={true} style={{height: &quot;100%&quot;, width: &quot;100%&quot;,zIndex:'1'}}&gt;
            &lt;TileLayer
                url={`example.com`}
                attribution='Map data &amp;copy; &lt;a&gt;Mapbox&lt;/a&gt;'
            /&gt;
            {markers?.map((element,idx)=&gt;{
              return &lt;Marker
                  position={element?.cord}
                  draggable={true}
                  animate={true}
                  key={idx}
              &gt;
                &lt;Popup&gt;
                  Test PopUP
                &lt;/Popup&gt;
              &lt;/Marker&gt;
            })}
          &lt;/MapContainer&gt; 
  
  }}
  }
  </code></pre>