change markerF icon on click

[fakhribenfraj]

Please provide an explanation of the issue

i created a markerF component with custom icon path i want to change the color and scale when we click on it so i created a state that changes on click the state changes succefully and the component rerenders correctly too but the icon on the map does not change

Your Environment

os: windows

node v18.16.1

react 18

nextjs 13.4.13

@react-google-maps/api 2.19.2

How does it behave?

only shows the icon of the initial state

How should it behave correctly?

when we click on the marker the icon should change depending on the parameters (color,scale...)

Basic implementation of incorrect behavior

const Marker = ({ position, children, onClick }: MarkerProps) => {
   const [iconOption, setIconOptions] = useState<{
      scale: number;
      color: string;
    }>({ scale: 1.5, color: theme.palette.common.black });
  const iconPath =
    "M 12 2 C 8.1 2 5 5.1 5 9 c 0 5.3 7 13 7 13 s 7 -7.8 7 -13 c 0 -3.9 -3.1 -7 -7 -7 z M 7 9 c 0 -2.8 2.2 -5 5 -5 s 5 2.2 5 5 c 0 2.9 -2.9 7.2 -5 
     9.9 C 9.9 16.2 7 11.8 7 9 z M 10 9 C 10 8 11 7 12 7 C 13 7 14 8 14 9 C 14 10 13 11 12 11 C 11 11 10 10 10 9 M 12 7";
     const handleClick = (event: any) => {
       setIconOptions({ scale: 1.8, color: theme.palette.primary.main });
    };
  return (<MarkerF
        onClick={(e) => {
          handleClick(e.domEvent);
        }}
        position={position}
        icon={{
          strokeColor: "transparent",
          fillColor: iconOption.color,
          path: iconPath,
          fillOpacity: 1,
          scale: iconOption.scale,
        }}
      />)
}