update mapbox map to latest react

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 ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 /**
  * A functional component that can be used to render a custom marker on the map.
@@ -136,11 +136,14 @@ export function MapboxMap<T>({
           const el = document.createElement('div');
           const markerOptions: mapboxgl.MarkerOptions = {};
           if (PinComponent) {
-            ReactDOM.render(<PinComponent
-              index={i}
-              mapbox={mapbox}
-              result={result}
-            />, el);
+            const root = createRoot(el!);
+            root.render(
+              <PinComponent
+                index={i}
+                mapbox={mapbox}
+                result={result}
+              />
+            );
             markerOptions.element = el;
           }
           const marker = new mapboxgl.Marker(markerOptions)
@@ -183,4 +186,4 @@ function getDefaultCoordinate<T>(result: Result<T>): Coordinate | undefined {
     return undefined;
   }
   return yextDisplayCoordinate;
-}
+}

test-site/src/config.ts

@@ -1,7 +1,7 @@
 import { CloudRegion, Environment } from '@yext/search-headless-react';
 
 export const config = {
-  apiKey: process.env.REACT_APP_LIVE_API_KEY || 'REPLACE_ME',
+  apiKey: '2d8c550071a64ea23e263118a2b0680b',
   experienceKey: 'slanswers-hier-facets',
   locale: 'en',
   experienceVersion: 'STAGING',