Updated frameworks.

frontend/src/features/vehicles/hooks/useOptimisticVehicles.ts

@@ -1,9 +1,9 @@
 /**
- * @ai-summary React 19 useOptimistic hook for vehicle operations
- * @ai-context Provides optimistic updates for better perceived performance
+ * @ai-summary React 18 compatible optimistic updates hook for vehicle operations
+ * @ai-context Provides optimistic updates for better perceived performance using useState and useTransition
  */
 
-import { useOptimistic, useTransition } from 'react';
+import { useState, useTransition, useEffect } from 'react';
 import { Vehicle, CreateVehicleRequest } from '../types/vehicles.types';
 import { useQueryClient } from '@tanstack/react-query';
 import { vehiclesApi } from '../api/vehicles.api';
@@ -30,13 +30,20 @@ function vehicleReducer(state: Vehicle[], action: VehicleAction): Vehicle[] {
 }
 
 export function useOptimisticVehicles(vehicles: Vehicle[] = []) {
-  const [optimisticVehicles, addOptimistic] = useOptimistic(
-    vehicles,
-    vehicleReducer
-  );
+  const [optimisticVehicles, setOptimisticVehicles] = useState<Vehicle[]>(vehicles);
   const [isPending, startTransition] = useTransition();
   const queryClient = useQueryClient();
 
+  // React 18 compatible optimistic update function
+  const addOptimistic = (action: VehicleAction) => {
+    setOptimisticVehicles(currentVehicles => vehicleReducer(currentVehicles, action));
+  };
+
+  // Sync optimistic state with actual vehicles when they change
+  useEffect(() => {
+    setOptimisticVehicles(vehicles);
+  }, [vehicles]);
+
   const optimisticCreateVehicle = async (data: CreateVehicleRequest) => {
     // Create optimistic vehicle with temporary ID
     const optimisticVehicle: Vehicle = {