I want to add multiple small images of solar panel inside polygon on google maps

[here is the image of polygon and I want to add multiple images of solar panel inside the polygon][1]

I want to add multiple small images of solar panel inside polygon on google maps I am using @react-google-maps/api package

import React from "react";
import {
  GoogleMap,
  DrawingManager,
  LoadScript,
  Polygon,
  OverlayView,
  GroundOverlay,
} from "@react-google-maps/api";
import { setRoofSurface } from "../../Features/RoofArea/roofarea.actions";
import { useDispatch, useSelector } from "react-redux";
import { CircularProgress } from "@material-ui/core";
import solar from "../../assest/images/solar.jpg";

export function AreaMap({ coords }) {
  const {
    OfferEditionCustomer: {
      singleCustomer: { location },
    },
  } = useSelector((state) => state);

  const dispatch = useDispatch();

  const containerStyle = {
    width: "100%",
    height: "60%",
  };
  const drawingOnLoad = (drawingManager) => {
    console.log(drawingManager);
  };
  const onPolygonComplete = (polygon) => {
    var area = window.google.maps.geometry.spherical.computeArea(
      polygon.getPath()
    );
    console.log(polygon.getPoints());
    const latlng = polygon.latLngs.Rd[0].Rd.map((item) => {
      return {
        lat: item.lat(),
        lng: item.lng(),
      };
    });

    console.log(polygon.latLngs, "polygon");

    if (latlng)
      dispatch(
        setRoofSurface({ name: "coords", value: JSON.stringify(latlng) })
      );

    dispatch(setRoofSurface({ name: "area", value: area }));
  };

  const center = {
    lat: 40.74,
    lng: -74.18,
  };

  const bounds = {
    north: 1.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  return (
    <div>
      <LoadScript
        id="script-loader"
        googleMapsApiKey=""
        language={"en"}
        region={"EN"}
        version={"weekly"}
        loadingElement={
          <div
            style={{
              minWidth: "100%",
              minHeight: "50vh",
              justifyContent: "center",
              alignItems: "center",
              display: "flex",
            }}
          >
            <CircularProgress />
          </div>
        }
        libraries={["drawing,geometry"]}
      >
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={location && JSON.parse(location).latlang}
          zoom={20}
          mapTypeId="satellite"
        >
          <DrawingManager
            onLoad={drawingOnLoad}
            onPolygonComplete={onPolygonComplete}
            options={{
              drawingControl: true,
              drawingControlOptions: {
                position: 2,
                drawingModes: ["polygon"],
              },
            }}
          />
          <Polygon
            draggable={true}
            editable={true}
            options={{
              strokeColor: "#FF0000",
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: "#FF0000",
              fillOpacity: 0.35,
            }}
            paths={coords && JSON.parse(coords)}
          />

          {/* <OverlayView
            center={location && JSON.parse(location).latlang}
            mapPaneName={OverlayView.MAP_PANE}
          >
            <div style={{ display: "grid" }}>
              {Array(20)
                .fill()
                .map(() => {
                  return (
                    <img
                      src={solar}
                      style={{ width: "20px", height: "20px" }}
                    />
                  );
                })}
            </div>
          </OverlayView> */}
        </GoogleMap>
      </LoadScript>
    </div>
  );
}