How to change the stroke color of a polygon onMouseEnter in React Google Map API

Question

I am having an array of polygon coordinates which are being mapped and displayed on the map.

Secondly, I have a mouseenter and mouseout event which takes in the particular lat and lng coordinate of a particular polygon and zooms over them to focus on them.

Now what I want to achieve is that, anytime I mouse over any polygon from the list on the table, I want the strokeColor of that particular polygon to change. My current logic only changes the strokeColor of every polygon, which is not what I want.

My code is explained below:

This is the mouse-enter function

const handleRowHover = (event, props) => {
    console.log("event", event);
    console.log("props", props);
    setCenter({
      lat: props?.data?.geoData?.point?.coordinates?.[1],

      lng: props?.data?.geoData?.point?.coordinates?.[0],
    });
    setZoomLevel(18);
    setMapColor("red");
  };

This is the mapped list of polygons from an API endpoint

{allFarmsPolygons.map((poly) => (
        <Polygon paths={poly} options={options} />
      ))}

This is the react google maps api options

  const options = {
    fillColor: "rgb(128,128,128, 0.5)",
    fillOpacity: 1,
    strokeColor: center ? mapColor : "#066344",
    strokeOpacity: 10,
    strokeWeight: 2,
    clickable: true,
    draggable: false,
    editable: false,
    geodesic: false,
    zIndex: 2,
  };

Please any help or hint would be much appreciated. If additional info is needed, I can provide them.

I have tried putting the strokeColor into state, but it just applies to every polygon on the iteration. I want it to apply to only the particular polygon being mouse entered. I am using material-table to display the names of each polygon by the way.