How to show infowindow on marker mouseover and close on mouse out but if the cursor is on infowindow dont close infowindow react google maps

Here is the code i want to show infowindow on marker hover and close on mouse leave but only if mouse is not on infowindow. For now the infowindow is showing on mouse over but infowindow is being close when hovering.

           {SellerLocation === "on" && sellerData.map((element, index) => {
                                return (
                                    <>
                                        <Marker
                                            key={index}
                                            position={
                                                {
                                                    lat: element.Marker.lat,
                                                    lng: element.Marker.lng
                                                }}
                                            icon={{
                                                url: blueFalcon,
                                                scaledSize: new window.google.maps.Size(40, 40)
                                            }}
                                            onMouseOver={() => {
                                                setSelected("on")
                                                setBuyerSelected("off")
                                                setId(index)
                                            }}
                                            onClick={() => {
                                                setSelected("on")
                                                setBuyerSelected("off")
                                                setId(index)
                                            }}
                                            onMouseOut={() => {
                                                setSelected("off")
                                            }}
                                        >

                                            {selected === "on" && id === index ?
                                                <InfoWindow position={{
                                                    lat: element.Marker.lat,
                                                    lng: element.Marker.lng
                                                }}
                                                    key={index}
                                                >
                                                        <div className="d-flex gig" style={{
                                                            background: `url(${element.img})`
                                                        }}>
                                                                <p className='seller'>{element.name}</p>
                                                                
                                                    </div>
                                                </InfoWindow>
                                                : ""}
                                        </Marker>
                                    </>
                                )
                            })}