refactor: Update zone handling by integrating zoneStore in multiple components and removing unused zones state

app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx

@@ -20,7 +20,7 @@ function ZoneCreator() {
     const { activeLayer } = useActiveLayer();
     const { socket } = useSocketStore();
     const { zoneStore } = useSceneContext();
-    const { addZone, getZonePointById, getZoneByPoints } = zoneStore();
+    const { zones, addZone, getZonePointById, getZoneByPoints } = zoneStore();
     const drag = useRef(false);
     const isLeftMouseDown = useRef(false);
     const { selectedVersionStore } = useVersionContext();
@@ -32,6 +32,7 @@ function ZoneCreator() {
     const [isCreating, setIsCreating] = useState(false);
     const { zoneColor, zoneHeight, snappedPosition, snappedPoint, setSnappedPoint, setSnappedPosition } = useBuilderStore();
 
+
     useEffect(() => {
         const canvasElement = gl.domElement;
 
@@ -92,7 +93,7 @@ function ZoneCreator() {
             if (tempPoints.length > 2 && isCreating && snappedPoint && snappedPoint.pointUuid === tempPoints[0].pointUuid) {
                 const zone: Zone = {
                     zoneUuid: THREE.MathUtils.generateUUID(),
-                    zoneName: "Zone",
+                    zoneName: `Zone `,
                     points: tempPoints,
                     zoneColor,
                     zoneHeight,