I am showing multiple polygons on google map and want to change the color of polygon on hover. I am using functional based component. This is how my code looks like:

It's called on hover

const changePolygonBG = (polygon) => {
        if( typeof polygon === 'undefined'){
            return false;
        }
        const currentColor = polygon.fillColor == fillColors[0]
            ? fillColors[1]
            : fillColors[0];
        polygon.setOptions({fillColor: currentColor});
}

Polygon code

<Polygon 
    paths={triangleCoords} 
    onMouseover={ changePolygonBG } 
    onMouseout={ changePolygonBG } 
    strokeOpacity={0.8} 
    strokeWeight={2} 
    fillColor={ fillColors[0] }
    fillOpacity={0.35}
/>

When I hover on polygon, it shows an error: "Uncaught TypeError: polygon.setOptions is not a function"

Codesandbox link