How to implement overlay map using @react-google-maps/api?

Question

Basically, I want to implement this fiddle using the @react-google-maps/api library.

It's adding an overlay of red areas marked as deforestation.

I tried setting the imageMapType like this

  const imageMapType = new window.google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      return [
        "https://tiles.globalforestwatch.org/umd_tree_cover_loss/latest/dynamic" +
        "/" +
        zoom +
        "/" +
        coord.x +
        "/" +
        coord.y +
        ".png?start_year=2021&end_year=2022",
      ].join("");
    },
    tileSize: new window.google.maps.Size(256, 256),
    opacity: 0.5
  });

but then I'm confused on how to implement this line of code:

  map.overlayMapTypes.push(imageMapType);
  map.overlayMapTypes.getAt(0).setOpacity(0.5);

I tried adding it as extraMapTypes but it won't work

<GoogleMap
  mapContainerStyle={mapContainerStyle}
  center={{ lat, lng }}
  zoom={10}
  options={{
    gestureHandling: 'cooperative',
    mapTypeId: 'hybrid',
    styles: [{
      featureType: "road",
      stylers: [{ visibility: "off" }]
    }]
  }}
  extraMapTypes={imageMapType}
  onLoad={onLoad}
>

Is there a way to implement it or should I use another library for it?