HeatMap - 'google' is not defined and Module not found errors

Please provide an explanation

HeatMap implementation results in two errors described below. I have tried using the Gatsby example but have the same issue. I am just trying to display on a simple one page app using CRA.

Your Environment

os: mac/linux/windows/

node --version v16.13.0

react version 18.0.0

@react-google-maps/api version 2.8.1

How is it behave?

I cannot get the heatmap later to display - getting two errors:

1. 'google' is not defined
2. Module not found: Error: You attempted to import ../../docs/ScriptLoaded which falls outside of the project src/ directory.

How should it behave correctly?

Heatmap should render

basic implementation of incorrect behavior in codesandbox.com

https://codesandbox.io/s/kind-wescoff-ud7jb8?file=/src/App.js

import { GoogleMap, HeatmapLayer } from '@react-google-maps/api';
const ScriptLoaded = require('../../docs/ScriptLoaded').default;

const mapContainerStyle = {
  height: '400px',
  width: '800px',
};

const center = {
  lat: 37.774546,
  lng: -122.433523,
};

function App() {
  const onLoad = (heatmapLayer) => {
    console.log('HeatmapLayer onLoad heatmapLayer: ', heatmapLayer);
  };

  const onUnmount = (heatmapLayer) => {
    console.log('HeatmapLayer onUnmount heatmapLayer: ', heatmapLayer);
  };

  return (
    <div className="App">
      <div className="map-container">
        <ScriptLoaded>
          {() => (
            <GoogleMap
              // optional
              id="heatmap-layer-example"
              // required to set height and width either through mapContainerClassName, either through mapContainerStyle prop
              mapContainerStyle={mapContainerStyle}
              // required
              zoom={13}
              // required
              center={center}>
              <HeatmapLayer
                // optional
                onLoad={onLoad}
                // optional
                onUnmount={onUnmount}
                // required
                data={[
                  new google.maps.LatLng(37.782, -122.447),
                  new google.maps.LatLng(37.782, -122.445),
                  new google.maps.LatLng(37.782, -122.443),
                  new google.maps.LatLng(37.782, -122.441),
                  new google.maps.LatLng(37.782, -122.439),
                  new google.maps.LatLng(37.782, -122.437),
                  new google.maps.LatLng(37.782, -122.435),
                  new google.maps.LatLng(37.785, -122.447),
                  new google.maps.LatLng(37.785, -122.445),
                  new google.maps.LatLng(37.785, -122.443),
                  new google.maps.LatLng(37.785, -122.441),
                  new google.maps.LatLng(37.785, -122.439),
                  new google.maps.LatLng(37.785, -122.437),
                  new google.maps.LatLng(37.785, -122.435),
                ]}
              />
            </GoogleMap>
          )}
        </ScriptLoaded>
      </div>
    </div>
  );
}

export default App;

[EthanEFung]

import * as React from "react";
import {
  GoogleMap,
  HeatmapLayer,
  useJsApiLoader
} from "@react-google-maps/api";

const mapContainerStyle = {
  height: "400px",
  width: "800px"
};

const center = {
  lat: 37.774546,
  lng: -122.433523
};

const libraries = ["visualization"];

export default function App() {
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: "YOUR_API_KEY",
    libraries
    // ...otherOptions
  });
  const data = React.useMemo(() => {
    if (isLoaded === false) {
      return [];
    }
    return [
      new window.google.maps.LatLng(37.782, -122.447),
      new window.google.maps.LatLng(37.782, -122.445),
      new window.google.maps.LatLng(37.782, -122.443),
      new window.google.maps.LatLng(37.782, -122.441),
      new window.google.maps.LatLng(37.782, -122.439),
      new window.google.maps.LatLng(37.782, -122.437),
      new window.google.maps.LatLng(37.782, -122.435),
      new window.google.maps.LatLng(37.785, -122.447),
      new window.google.maps.LatLng(37.785, -122.445),
      new window.google.maps.LatLng(37.785, -122.443),
      new window.google.maps.LatLng(37.785, -122.441),
      new window.google.maps.LatLng(37.785, -122.439),
      new window.google.maps.LatLng(37.785, -122.437),
      new window.google.maps.LatLng(37.785, -122.435)
    ];
  }, [isLoaded]);

  if (isLoaded === false) {
    return null;
  }

  return (
    <div className="map">
      <div className="map-container">
        <GoogleMap
          id="heatmap-example"
          mapContainerStyle={mapContainerStyle}
          zoom={13}
          center={center}
        >
          <HeatmapLayer data={data} />
        </GoogleMap>
      </div>
    </div>
  );
}

[SKempin]

Thanks