find ride and book ride page ui created

components/map.tsx

@@ -8,7 +8,7 @@ import { icons } from "@/constants";
 
 const drivers = [
   {
-    id: "1",
+    id: 1,
     driver_id: 1,
     first_name: "James",
     last_name: "Wilson",
@@ -18,9 +18,14 @@ const drivers = [
       "https://ucarecdn.com/a2dc52b2-8bf7-4e49-9a36-3ffb5229ed02/-/preview/465x466/",
     car_seats: 4,
     rating: 4.8,
+    latitude: 0,
+    longitude: 0,
+    title: "",
+    price: "45",
+    time: 5,
   },
   {
-    id: "2",
+    id: 2,
     driver_id: 2,
     first_name: "David",
     last_name: "Brown",
@@ -30,9 +35,14 @@ const drivers = [
       "https://ucarecdn.com/a3872f80-c094-409c-82f8-c9ff38429327/-/preview/930x932/",
     car_seats: 5,
     rating: 4.6,
+    latitude: 0,
+    longitude: 0,
+    title: "",
+    price: "45",
+    time: 5,
   },
   {
-    id: "3",
+    id: 3,
     driver_id: 3,
     first_name: "Michael",
     last_name: "Johnson",
@@ -42,9 +52,14 @@ const drivers = [
       "https://ucarecdn.com/289764fb-55b6-4427-b1d1-f655987b4a14/-/preview/930x932/",
     car_seats: 4,
     rating: 4.7,
+    latitude: 0,
+    longitude: 0,
+    title: "",
+    price: "45",
+    time: 5,
   },
   {
-    id: "4",
+    id: 4,
     driver_id: 4,
     first_name: "Robert",
     last_name: "Green",
@@ -54,6 +69,11 @@ const drivers = [
       "https://ucarecdn.com/b6fb3b55-7676-4ff3-8484-fb115e268d32/-/preview/930x932/",
     car_seats: 4,
     rating: 4.9,
+    latitude: 0,
+    longitude: 0,
+    title: "",
+    price: "45",
+    time: 5,
   },
 ];
 
@@ -76,6 +96,8 @@ export const Map = () => {
 
   useEffect(() => {
     if (Array.isArray(drivers)) {
+      setDrivers(drivers);
+
       if (!userLatitude || !userLongitude) return;
 
       const newMarkers = generateMarkersFromData({