diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx
index 39bef7392f25..6594e57f055d 100644
--- a/src/components/MapView/MapView.web.tsx
+++ b/src/components/MapView/MapView.web.tsx
@@ -40,18 +40,24 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(
 
             const map = mapRef.getMap();
 
-            const resizeObserver = new ResizeObserver(() => {
-                mapRef?.resize();
-            });
-            resizeObserver.observe(mapRef?.getContainer());
-
             const {northEast, southWest} = utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));
             map.fitBounds([northEast, southWest], {padding: mapPadding});
+        }, [waypoints, mapRef, mapPadding]);
+
+        useEffect(() => {
+            if (!mapRef) {
+                return;
+            }
+
+            const resizeObserver = new ResizeObserver(() => {
+                mapRef.resize();
+            });
+            resizeObserver.observe(mapRef.getContainer());
 
             return () => {
                 resizeObserver?.disconnect();
             }
-        }, [waypoints, mapRef, mapPadding]);
+        }, [mapRef]);
 
         useImperativeHandle(
             ref,