refactor(maps-web): use React 18 useEffect pattern for LeafletMap ref cleanup

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: iobuhov

packages/pluggableWidgets/maps-web/src/components/LeafletMap.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { ReactElement, useCallback, useRef } from "react";
+import { ReactElement, useEffect, useRef } from "react";
 import { getDimensions } from "@mendix/widget-plugin-platform/utils/get-dimensions";
 import { MapProviderEnum } from "../../typings/MapsProps";
 import { SharedProps } from "../../typings/shared";
@@ -12,32 +12,27 @@ export interface LeafletProps extends SharedProps {
 
 export function LeafletMap(props: LeafletProps): ReactElement {
     const vm = useLeafletMapVM();
-    const cleanupRef = useRef<(() => void) | undefined>(undefined);
+    const mapNodeRef = useRef<HTMLDivElement | null>(null);
 
-    const refCallback = useCallback(
-        (node: HTMLDivElement | null) => {
-            cleanupRef.current?.();
-            cleanupRef.current = undefined;
+    useEffect(() => {
+        const node = mapNodeRef.current;
+        if (!node) {
+            return;
+        }
 
-            if (node) {
-                cleanupRef.current = vm.setupMap(node);
-                // React 19: returned cleanup is called on unmount.
-                // React 18: ignored (cleanup happens via null-call above).
-                return () => {
-                    cleanupRef.current?.();
-                    cleanupRef.current = undefined;
-                };
-            }
-        },
-        [vm]
-    );
+        const cleanup = vm.setupMap(node);
+
+        return () => {
+            cleanup();
+        };
+    }, [vm]);
 
     return (
         <div className={classNames("widget-maps", props.className)} style={{ ...props.style, ...getDimensions(props) }}>
             <div className="widget-leaflet-maps-wrapper">
                 <div
                     className="widget-leaflet-maps"
-                    ref={refCallback}
+                    ref={mapNodeRef}
                     style={{ top: 0, bottom: 0, left: 0, right: 0, position: "absolute", zIndex: 1 }}
                 />
             </div>