Регулировка непрозрачности на Google Maps GroundOverlay с помощью ловушек React

Question

В этой песочнице кода https://codesandbox.io/s/overlayr-53zrl, Я пытаюсь изменить непрозрачность GroundOverlay по сравнению с начальным значением 0.5,

к тому, что я установил в слайдере «Непрозрачность наложения» ниже. Однако, что я заметил, так это то, что если я изменил значение ползунка, наложение становится полностью непрозрачным (что соответствует opacity из 1.0).

(у меня было что-то похожее работающее (посмотрите на https://khpeek.github.io/beomaps/) в другом репо (https://github.com/khpeek/beomaps), который использует пакет react-google-maps, но решил отойти от этого пакета как * 1021) * В реализации, похоже, есть ошибка производительности).

Основной App компонент этого репозитория имеет хук состояния opacity:

import React, { useState } from 'react';
import './App.css';
import Map from './components/Map';
import GroundOverlay from './components/GroundOverlay';
import SearchBox from './components/SearchBox';
import { withStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper';
import FormLabel from '@material-ui/core/FormLabel';
import Slider from '@material-ui/lab/Slider';

const styles = theme => ({
  paper: {
    padding: theme.spacing(1.5),
  },
  label: {
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
})

function App(props) {
  const [bounds, setBounds] = useState({});
  const [opacity, setOpacity] = useState(0.5);

  function handleChange(event, value) {
    setOpacity(value);
  }

  return (
    <div className="App">
      <CssBaseline />
      <Container>
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <Map
              zoom={12}
              center={{ lat: 40.740, lng: -74.18 }}
              events={{ onBoundsChanged: arg => setBounds(arg) }}
            >
              <SearchBox />
              <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={opacity}/>
            </Map>
          </Grid>
          <Grid item xs={6}>
            <Paper className={props.classes.paper}>
              <Box flexDirection="column">
                <FormLabel className={props.classes.label}>Overlay Opacity</FormLabel>
                <Box mt={1} mx={1}>
                  <Slider
                    value={opacity}
                    min={0}
                    max={1}
                    onChange={handleChange}
                  />
                </Box>
              </Box>
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </div>
  );
}

export default withStyles(styles)(App);

Компонент GroundOverlay просто перенаправляет свои реквизиты на свой собственный обработчик эффектов, useGroundOverlay:

import useGroundOverlay from '../hooks/useGroundOverlay';

export default function GroundOverlay({
  url,
  bounds,
  maps,
  map,
  events,
  opacity
}) {
  useGroundOverlay({
    url,
    bounds,
    maps,
    map,
    events,
    opacity
  });

  return null;
}

useGroundOverlay, в свою очередь, содержит opacity в своем массиве зависимостей:

import { useEffect, useState } from "react";

export default function useGroundOverlay({
  url,
  bounds,
  maps,
  map,
  opacity
}) {
  const [groundOverlay, setGroundOverlay] = useState();
  useEffect(() => {
    const groundOverlay = new maps.GroundOverlay(
      url,
      bounds
    );
    groundOverlay.setMap(map);
    groundOverlay.setOpacity(opacity);

    setGroundOverlay(groundOverlay);
  }, [opacity]);

  return groundOverlay;
}

Я немного озадачен, почему это не работает? Когда я устанавливаю непрозрачность компонента App, должны ли эти изменения «распространяться» на GroundOverlay?