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>
+  );
+}

src/pages/ParkDetail.tsx

@@ -10,7 +10,7 @@ import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Cam
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { RideCard } from '@/components/rides/RideCard';
 import { Park, Ride } from '@/types/database';
-import { ParkLocationMap } from '@/components/maps/ParkLocationMap';
+import { DynamicParkLocationMap } from '@/components/maps/DynamicParkLocationMap';
 import { supabase } from '@/integrations/supabase/client';
 export default function ParkDetail() {
   const {
@@ -345,7 +345,7 @@ export default function ParkDetail() {
                       
                       {park.location?.latitude && park.location?.longitude && (
                         <div className="mt-4">
-                          <ParkLocationMap
+                          <DynamicParkLocationMap
                             latitude={Number(park.location.latitude)}
                             longitude={Number(park.location.longitude)}
                             parkName={park.name}