Google Maps and React - Touching a marker reacts all

I am making a map with react, where there is a marker per province. When I hover on the marker, I want a small div to appear with the name of the province. I implemented it with one and it worked. Now when I want to render all the markers, if I hover over one, I see all 23 divs corresponding to all the markers, and I only want to see the one that corresponds. Should I create 23 states for each cartel?

import React, { useState } from 'react'
import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
import { Marker, InfoWindow } from '@react-google-maps/api';


const containerStyle = {
  width: '90%',
  height: '100%'
};

const center = {
  lat: -34.6037,
  lng: -58.3816
};

function MyComponent() {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "xxxxxxxx"
  })


  const [info, setInfo] = useState(false)


  const ubicaciones = [
    { lat: -34.920345, lng: -57.969559, name: "La Plata" },
    { lat: -26.8753965086829, lng: -54.6516966230371, name: "Misiones" },
    { lat: -33.7577257449137, lng: -66.0281298195836, name: "San Luis" },
    { lat: -30.8653679979618, lng: -68.8894908486844, name: "San Juan" },
    { lat: -32.0588735436448, lng: -59.2014475514635, name: "Entre Ríos" },
    { lat: -48.8154851827063, lng: -69.9557621671973, name: "Santa Cruz" },
    { lat: -40.4057957178801, lng: -67.229329893694, name: "Río Negro" },
    { lat: -43.7886233529878, lng: -68.5267593943345, name: "Chubut" },
    { lat: -32.142932663607, lng: -63.8017532741662, name: "Córdoba" },
    { lat: -34.6298873058957, lng: -68.5831228183798, name: "Mendoza" },
    { lat: -29.685776298315, lng: -67.1817359694432, name: "La Rioja" },
    { lat: -27.3358332810217, lng: -66.9476824299928, name: "Catamarca" },
    { lat: -37.1315537735949, lng: -65.4466546606951, name: "La Pampa" },
    { lat: -27.7824116550944, lng: -63.2523866568588, name: "Santiago Del Estero" },
    { lat: -28.7743047046407, lng: -57.8012191977913, name: "Corrientes" },
    { lat: -30.7069271588117, lng: -60.9498369430241, name: "Santa Fe" },
    { lat: -26.9478001830786, lng: -65.3647579441481, name: "Tucumán" },
    { lat: -38.6417575824599, lng: -70.1185705180601, name: "Neuquén" },
    { lat: -24.2991344492002, lng: -64.8144629600627, name: "Salta" },
    { lat: -26.3864309061226, lng: -60.7658307438603, name: "Chaco" },
    { lat: -24.894972594871, lng: -59.9324405800872, name: "Formosa" },
    { lat: -23.3200784211351, lng: -65.7642522180337, name: "Jujuy" },
    { lat: -34.6144934119689, lng: -58.4458563545429, name: "CABA" },
    { lat: -82.52151781221, lng: -50.7427486049785, name: "Tierra Del Fuego" }]






  const handleMouseOver = e => {
    setInfo(true)
  };

  const handleMouseExit = e => {
    setInfo(false)
  };

  const icon = {
    path:
      "M8 12l-4.7023 2.4721.898-5.236L.3916 5.5279l5.2574-.764L8 0l2.3511 4.764 5.2574.7639-3.8043 3.7082.898 5.236z",
    fillColor: "green",
    fillOpacity: 0.9,
    scale: 1.3,
    strokeColor: "black",
    strokeWeight: 1,
  }

  const divStyle = {
    background: `white`,
    border: `1px solid #ccc`,
    padding: 15,
    outline: 'none'
  }


  return isLoaded ? (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={4}
    >
      { /* Child components, such as markers, info windows, etc. */
        <div>
          {ubicaciones.map((e) =>
            <Marker
              position={e}
              icon={icon}
              onMouseOver={handleMouseOver}
              onMouseOut={handleMouseExit}
            > {info && (
              <InfoWindow>
                <div style={divStyle}>
                  <span>Estamos en {e.name}</span>
                </div>

              </InfoWindow>
            )}</Marker>)}
        </div>
      }
      <></>

    </GoogleMap>
  ) : <></>
}

export default React.memo(MyComponent)