I'm trying to import Map component through dynamic import. But i'm getting this error.

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

// Map.js
const Map = forwardRef((props, ref) => {
    
    return (
        <MapContainer
            center={[51.505, -0.09]}
            zoom={13}
            ref={ref.mapRef}
            whenReady={props.handleMapReady}
        >
          .....
           </MapContainer>

// Page.js
"use client"
const Map = dynamic(() => import("@/components/Map"), {
  ssr: false
})

return(
 <Map {...props} ref={{mapRef, featureGroupRef}} />
)