react18 and less reactdom

src/components/MapboxMap.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from 'react';
 import mapboxgl from 'mapbox-gl';
 import { Result, useSearchState } from '@yext/search-headless-react';
 import { useDebouncedFunction } from '../hooks/useDebouncedFunction';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 
 /**
  * A functional component that can be used to render a custom marker on the map.
@@ -136,13 +136,12 @@ export function MapboxMap<T>({
           const el = document.createElement('div');
           const markerOptions: mapboxgl.MarkerOptions = {};
           if (PinComponent) {
-            const root = createRoot(el!);
-            root.render(
-              <PinComponent
-                index={i}
-                mapbox={mapbox}
-                result={result}
-              />
+            renderPinComponentByReactVersion(
+              el,
+              i,
+              mapbox,
+              result,
+              PinComponent
             );
             markerOptions.element = el;
           }
@@ -186,4 +185,32 @@ function getDefaultCoordinate<T>(result: Result<T>): Coordinate | undefined {
     return undefined;
   }
   return yextDisplayCoordinate;
+}
+
+function renderPinComponentByReactVersion(
+  el: HTMLDivElement | null,
+  i: number,
+  mapbox: mapboxgl.Map,
+  result: Result<any>,
+  PinComponent: PinComponent<any>
+) {
+
+  if (React.version.startsWith('18')) {
+    import('react-dom/client').then(({ createRoot }) => {
+      const root = createRoot(el!);
+      root.render(
+        <PinComponent
+          index={i}
+          mapbox={mapbox}
+          result={result}
+        />
+      );
+    });
+  }else{
+    ReactDOM.render(<PinComponent
+      index={i}
+      mapbox={mapbox}
+      result={result}
+    />, el)
+  }
 }

tsconfig.json

@@ -10,7 +10,8 @@
     "declarationMap": true,
     "sourceMap": true,
     "jsx": "react",
-    "target": "es2017"
+    "target": "esnext",
+    "module": "esnext",
   },
   "include": [
     "src"