feat: Trigger second useEffect after fetching poiData

- Updated the first useEffect to fetch POI data from the API and store it in state.
- Added poiData as a dependency to the second useEffect to ensure it runs only after poiData is fetched.
- Ensured that the second useEffect waits for poiData to be populated before processing locations and adding markers to the map.

This change guarantees that the markers are only processed and displayed once the necessary POI data is available.

components/MapComponent.js

@@ -1211,6 +1211,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, []);
   //--------------------------------------------
   useEffect(() => {
+    if (poiData.length === 0) return;
+
     try {
       if (map && poiLayerRef.current && isPoiTypLoaded) {
         map.removeLayer(poiLayerRef.current);
@@ -1306,6 +1308,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     isPoiTypLoaded,
     userRights,
     poiLayerVisible,
+    poiData, // Add poiData as a dependency
   ]);
 
   //---------------------------------------------