onMouseOver and onMouseOut triggers every mapped element

Question

With react google maps api I am trying to do open info window when user mouse over a marker. When I hover single marker every info window opens.

`

 const [showMarker, setShowMarker] = useState(true);

return isLoaded ? (
<GoogleMap
   mapContainerStyle={containerStyle}
   center={center}
   zoom={6}
   onLoad={onLoad}
   onUnmount={onUnmount}
   >
   {markers?.map((hotel, i) => {
      return showMarker ? 
      <Marker
      onLoad={onLoad}
      position={{ lat: hotel.lat, lng: hotel.lng }}
      onMouseOver={() => setShowMarker(false)}
      key={i}
      /> : 
      <InfoWindowF
      onLoad={onLoad}
      position={{ lat: hotel.lat, lng: hotel.lng }}
      key={i}
    >
      <div onMouseOut={() => setShowMarker(true)} style={divStyle}>
        <h1>{hotel.name}</h1>
        <img style={{width: "200px", height: "100px"}} src={hotel.img} alt={hotel.name}>
        </img>
        <Typography>
          Gecelik: {hotel.price}TL - {personCount} kişi: {hotel.price * personCount}TL
        </Typography>
      </div>
    </InfoWindowF>
      })}
    <></>
   </GoogleMap>
    ) : <></>`

If user hover the cursor relevant info window should open.