feat: Refactor VehicleInstance component to include path computation and state management

app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx

@@ -1,10 +1,21 @@
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import VehicleAnimator from '../animator/vehicleAnimator'
+import * as THREE from "three";
 import { NavMeshQuery } from '@recast-navigation/core';
+import { useNavMesh } from '../../../../../store/store';
+import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
+import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
+
+function VehicleInstance({ agvDetails }: any) {
+    const { navMesh } = useNavMesh();
+    const { isPlaying } = usePlayButtonStore();
+    const { setVehicleActive, setVehicleState } = useVehicleStore();
+    const [currentPhase, setCurrentPhase] = useState<(string)>("stationed");
+    const [path, setPath] = useState<[number, number, number][]>([]);
+
+    const computePath = useCallback((start: any, end: any) => {
 
-function VehicleInstance() {
 
-  useEffect(() => {
         try {
             const navMeshQuery = new NavMeshQuery(navMesh);
             const { path: segmentPath } = navMeshQuery.computePath(start, end);
@@ -19,8 +30,7 @@ function VehicleInstance() {
     }, [navMesh]);
 
     useEffect(() => {
-    // const pickupToDropPath = computePath(pickup, drop);
+
-    // const dropToPickupPath = computePath(drop, pickup);
 
         if (isPlaying) {
             if (!agvDetails.isActive && agvDetails.state == "idle" && currentPhase == "stationed") {