Fix ReactDOM.render usage (#1267)

## Summary
- render popups with createRoot
- document the fix in CHANGELOG

## Testing
- `npm run lint`
- `npm run build`
- `apt run xvfb` *(fails: Invalid operation)*
- `xvfb-run -a npm run test` *(fails: command not found)*

------
https://chatgpt.com/codex/tasks/task_e_686915f46ba883319b83639b6b71cc6b

CHANGELOG.md

@@ -23,6 +23,8 @@
 
 - Fix incorrect handing of network error response (#944)
 - Show an error when adding a layer with a duplicate ID
+- Replace deprecated `ReactDOM.render` usage with `createRoot` and drop the
+  `DOMNodeRemoved` cleanup hack
 - _...Add new stuff here..._
 
 ## 2.1.1

src/components/MapMaplibreGl.tsx

@@ -1,5 +1,5 @@
 import React, {type JSX} from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import MapLibreGl, {LayerSpecification, LngLat, Map, MapOptions, SourceSpecification, StyleSpecification} from 'maplibre-gl'
 import MaplibreInspect from '@maplibre/maplibre-gl-inspect'
 import colors from '@maplibre/maplibre-gl-inspect/lib/colors'
@@ -17,8 +17,14 @@ import { withTranslation, WithTranslation } from 'react-i18next'
 import i18next from 'i18next'
 import { Protocol } from "pmtiles";
 
-function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container): HTMLElement {
-  ReactDOM.render(popup, mountNode);
+function renderPopup(
+  popupElement: JSX.Element,
+  mountNode: HTMLElement,
+  popup: MapLibreGl.Popup
+): HTMLElement {
+  const root = createRoot(mountNode);
+  popup.once('close', () => root.unmount());
+  root.render(popupElement);
   return mountNode as HTMLElement;
 }
 
@@ -174,10 +180,12 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
 
     const tmpNode = document.createElement('div');
 
+    const inspectPopup = new MapLibreGl.Popup({
+      closeOnClick: false
+    });
+
     const inspect = new MaplibreInspect({
-      popup: new MapLibreGl.Popup({
-        closeOnClick: false
-      }),
+      popup: inspectPopup,
       showMapPopup: true,
       showMapPopupOnHover: false,
       showInspectMapPopupOnHover: true,
@@ -189,9 +197,21 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       buildInspectStyle: (originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[]) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
       renderPopup: (features: InspectFeature[]) => {
         if(this.props.inspectModeEnabled) {
-          return renderPopup(<MapMaplibreGlFeaturePropertyPopup features={features} />, tmpNode);
+          return renderPopup(
+            <MapMaplibreGlFeaturePropertyPopup features={features} />,
+            tmpNode,
+            inspectPopup
+          );
         } else {
-          return renderPopup(<MapMaplibreGlLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
+          return renderPopup(
+            <MapMaplibreGlLayerPopup
+              features={features}
+              onLayerSelect={this.onLayerSelectById}
+              zoom={this.state.zoom}
+            />,
+            tmpNode,
+            inspectPopup
+          );
         }
       }
     })