Fetched workItem from cache instead of props to resolve state inconsistency issue.

src/components/Project/Infrastructure/WorkArea.jsx

@@ -1,8 +1,23 @@
-import React, { useEffect } from "react";
+import React, { useEffect,useState } from "react";
 import WorkItem from "./WorkItem";
+import {useProjectDetails} from "../../../hooks/useProjects";
+import {getCachedData} from "../../../slices/apiDataManager";
+
+const WorkArea = ( {workArea, floor, forBuilding} ) =>{
+  const [workItems,setWorkItems] =useState([])
+
+  useEffect( () =>
+  { 
+    const project = getCachedData( "projectInfo" )   
+    if (!project || !forBuilding?.id || !floor?.id || !workArea?.id) return;
+
+  const building = project.buildings?.find((b) => b.id === forBuilding.id);
+  const floors = building?.floors?.find((f) => f.id === floor.id);
+  const workAreas = floor?.workAreas?.find((wa) => wa.id === workArea.id);
+
+  setWorkItems(workAreas?.workItems || []);
+  }, [ workArea ,floor,floor] );
 
-const WorkArea = ({ workArea, floor, forBuilding }) => {
-  useEffect(() => {}, [workArea]);
   return (
     <React.Fragment key={workArea.id}>
       <tr>
@@ -25,7 +40,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
         </td>
       </tr>
 
-      {workArea?.workItems && workArea.workItems.length > 0 ? (
+      {(workItems && workItems.length > 0) && (
         <tr className="overflow-auto">
           <td colSpan={4}>
             <table className="table mx-1">
@@ -72,7 +87,8 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
             </table>
           </td>
         </tr>
-      ) : null}
+      )}
+    {!workItems && <p>No item</p>}
     </React.Fragment>
   );
 };