Fix: React rendering error

src/components/maps/DynamicParkLocationMap.tsx

@@ -0,0 +1,28 @@
+import React, { Suspense, lazy } from 'react';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface ParkLocationMapProps {
+  latitude: number;
+  longitude: number;
+  parkName: string;
+  className?: string;
+}
+
+// Lazy load the map component to avoid React 18 issues with react-leaflet
+const ParkLocationMapComponent = lazy(() => 
+  import('./ParkLocationMap').then(mod => ({ default: mod.ParkLocationMap }))
+);
+
+const MapSkeleton = () => (
+  <div className="w-full h-64 rounded-lg border border-border">
+    <Skeleton className="w-full h-full rounded-lg" />
+  </div>
+);
+
+export function DynamicParkLocationMap(props: ParkLocationMapProps) {
+  return (
+    <Suspense fallback={<MapSkeleton />}>
+      <ParkLocationMapComponent {...props} />
+    </Suspense>
+  );
+}