Google Maps Ground Overlay не определен?

Question

Я пытаюсь расширить проект в этой песочнице кода, https://codesandbox.io/s/lx947qjv0z, с GroundOverlay из этого примера . Я вставил хранилище в этот ящик с песком, https://codesandbox.io/s/google-maps-with-react-hooks-xywlb.

В основном я добавил компонент в google/GroundOverlay.jsx:

import { useState, useEffect } from "react";

export default function GroundOverlay({
  url,
  bounds,
  maps,
  map,
  events,
  opacity
}) {
  const [groundOverlay, setGroundOverlay] = useState();

  useEffect(() => {
    setGroundOverlay(new maps.GroundOverlay(url, bounds));
  });

  useEffect(() => {
    if (map) {
      groundOverlay.setMap(map);
    }

    if (opacity) {
      groundOverlay.setOpacity(opacity);
    }
  }, [map, opacity, groundOverlay]);

  return null;
}

и добавил этот компонент как дочерний элемент <Map> на верхнем уровне Consumer.jsx:

import React, { useState } from "react";
import Map from "./google/Map";
import Marker from "./google/Marker";
import TransitLayer from "./google/TransitLayer";
import GroundOverlay from "./google/GroundOverlay";
import getPlaces from "./utils/getPlaces";

export default function Consumer() {
  const places = getPlaces();
  const [placeIndex, setPlaceIndex] = useState(0);
  const [bound, setBound] = useState({});
  const [transitLayerEnabled, setTransitLayerEnabled] = useState(false);

  return (
    <div>
      <h3>Basic google maps with React hooks </h3>
      <Map
        zoom={10}
        center={{ lat: places[placeIndex].lat, lng: places[placeIndex].lng }}
        events={{ onBoundsChanged: arg => setBound(arg) }}
      >
        <TransitLayer enabled={transitLayerEnabled} />
        {places.map((m, index) => (
          <Marker
            key={m.id}
            active={placeIndex === index}
            title={"marker id: " + m.id}
            position={{ lat: m.lat, lng: m.lng }}
            events={{
              onClick: () => window.alert(`marker ${index} clicked`)
            }}
          />
        ))}
        <GroundOverlay
          url='https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg'
          bounds={{
            north: 40.773941,
            south: 40.712216,
            east: -74.12544,
            west: -74.22655
          }}
          opacity={0.5}
        />
      </Map>
      <button
        className="btn"
        onClick={() => setPlaceIndex((placeIndex + 1) % places.length)}
      >
        Next place
      </button>
      <br />
      <button
        className="btn"
        onClick={() => setTransitLayerEnabled(!transitLayerEnabled)}
      >
        Toggle transit layer
      </button>
      <br />
      Current place id: {places[placeIndex].id}
      <br />
      Map bounds: {bound.toString()}
    </div>
  );
}

Однако, если я запускаю это с npm start, я получаю следующую ошибку в консоли:

GroundOverlay.jsx? [sm]:19 Uncaught TypeError: Cannot read property 'setMap' of undefined

Я не уверен, почему переменная состояния groundOverlay равна undefined, поскольку она создается в первом useEffect()?