Next.js: render is not a function (Error)

[Rchn1907]

Bug report in v5

• All peer dependencies are installed: React, ReactDOM and Leaflet.
• Using the latest stable version of React and ReactDOM v19.
• Using the supported version of Leaflet (v1.9.0 minimum) and its corresponding CSS file is loaded.
• Using the latest v5 version of React-Leaflet.
• The issue has not already been reported.
• Make sure you have followed the quick start guide for Leaflet.
• Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

I have a nextjs Project which is running server side.
I try to implement a leaflet map into my component.

Actual behavior

I have a page.js which is running SSR: I implemented my MapCaller in it, which looks like this:

"use client";

import dynamic from "next/dynamic";

const LazyMap = dynamic(() => import("@/app/_components/Map/Map"), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

const MapCaller = () => {
  return (
    <div>
      <LazyMap />
    </div>
  );
}

export default MapCaller;

My Map Component looks like this:

"use client";
import React, { useState } from "react";
import { MapContainer, TileLayer, GeoJSON, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import L from "leaflet";

// GeoJSON sample data
const countriesData = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        properties: { NAME: "Georgia", CONTINENT: "Asia" },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [44.97248, 41.248129],
              [43.582746, 41.092143],
              [42.619549, 41.583173],
              [44.97248, 41.248129],
            ],
          ],
        },
      },
    ],
  };
  
  const pointsData = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [17.309889, 12.082583],
        },
        properties: {
          title: "Random Point",
        },
      },
    ],
  };
  
  const Map = ({initialData}) => {
    const [hoveredCountry, setHoveredCountry] = useState(null);
  
    const countryStyle = {
      fillColor: "green",
      color: "black",
      weight: 1,
      fillOpacity: 0.5,
    };
  
    const onEachCountry = (feature, layer) => {
      layer.on({
        mouseover: (e) => {
          setHoveredCountry(feature.properties);
          layer.setStyle({ fillColor: "blue", color: "blue" });
        },
        mouseout: () => {
          setHoveredCountry(null);
          layer.setStyle({ fillColor: "green", color: "black" });
        },
      });
    };
  
    return (
      <div style={{ position: "relative" }}>
        <MapContainer
          center={[51.505, -0.09]}
          zoom={2}
          scrollWheelZoom={false}
          style={{ height: "500px" }}
        >
          <TileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            attribution="&copy; OpenStreetMap contributors"
          />
          <GeoJSON
            data={countriesData}
            style={countryStyle}
            onEachFeature={onEachCountry}
          />
          {pointsData.features.map((point, index) => (
            <Marker
              key={index}
              position={[
                point.geometry.coordinates[1], // Latitude
                point.geometry.coordinates[0], // Longitude
              ]}
            >
              <Popup>{point.properties.title}</Popup>
            </Marker>
          ))}
        </MapContainer>
  
        {hoveredCountry && (
          <div
            style={{
              position: "absolute",
              top: 10,
              left: 10,
              background: "white",
              padding: 10,
              zIndex: 1000,
            }}
          >
            <strong>{hoveredCountry.NAME}</strong>
            <p>Continent: {hoveredCountry.CONTINENT}</p>
          </div>
        )}
      </div>
    );
  };

  export default Map;

But now i am getting this error:

I hope somebody can help me with my problem