GoogleMapReactで差し込まれている地図を3DのGoogle mapに差し替える方法

前提・実現したいこと

既存のシステムで使用されているGoogle mapが2Dなので、
3Dマップに差し替えたい。(Googleから今年5月にリファレンス有り)

GoogleのwebglOverlayViewの公式ドキュメントでは、
チュートリアルとしてテスト用のコードが配布されており、
その中ではinitMap()で地図を差し込むようになっているが、

差し替えたいシステム(JavaScript)はGoogleMapReactで地図が差し込まれており(?)、
この場合、どうやって3D地図に対応したmapIdなどを指定して良いかが分からない。

プログラミング自体が未経験に近いので、JavaScriptに関しても
よく理解ができていないため、解決法を導くことが難しい。

既存システムの書き換えが必要と思われる箇所のソースコード

JavaScript
1return (
2    <div style={{ height: "100vh", width: "100%" }}>
3      <GoogleMapReact
4        bootstrapURLKeys={{
5          key: apiKey,
6          libraries: ["places", "geometry", "drawing"],
7        }}
8        defaultCenter={defaultCenter}
9        defaultZoom={18}
10        options={mapOptions}
11        yesIWantToUseGoogleMapApiInternals
12        onGoogleApiLoaded={({ map, maps }) =>
13          setGoogleApi({
14            map: map,
15            maps: maps,
16            mapLoaded: true,
17          })
18        }
19        onChildMouseDown={onChildMouseDown}
20        onChange={onChange}
21      >

Googleチュートリアルのソースコード

JavaScript
1
2import { Loader } from '@googlemaps/js-api-loader';
3
4const apiOptions = {
5  "apiKey": "APIキー",
6  "version": "beta",
7  "map_ids": "マップID"
8};
9
10const mapOptions = {
11  "tilt": 30,
12  "heading": 0,
13  "zoom": 18,
14  "center": { lat: 35.6594945, lng: 139.6999859 },
15  "mapId": "マップID"
16}
17
18async function initMap() {
19  const mapDiv = document.getElementById("map");
20  const apiLoader = new Loader(apiOptions);
21  await apiLoader.load()
22  return new google.maps.Map(mapDiv, mapOptions);
23}
24
25function initWebglOverlayView (map) {
26  let scene, renderer, camera, loader;
27  // WebGLOverlayView code goes here
28}
29
30(async () => {
31  const map = await initMap();
32})();