Why does Popup open three times in one click?

Question

leaflet

console.log is called three times when I click the Marker and four more times when I close the popup. Can anyone explain why this is happening?

marker

const LocationMarker = ({elem, setIsVpnChanged, isVpnChanged, handleVpnStatus}) => {

const map=useMapEvents({
    popupopen(){
        // setIsVpnChanged((prev)=>({...prev, isChanged:true}))
        console.log('is opened')
    },
    popupclose(){
        setIsVpnChanged((prev)=>({...prev, isChanged:false}))
        console.log('is closed')
    }
})

    return <Marker position={elem.position} className="marker__down" opacity={(elem.health?1:0.5)} >
    <Popup>
      ...Some html...
    </Popup>
  </Marker>
}

and the Marker is simply rendered on the map by the number of elements in the data array

<MapContainer center={vpns[0].position && [0, 0]} zoom={2} id="map" className='map'>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {vpns.map((elem) =>
<LocationMarker elem={elem} setIsVpnChanged={setIsVpnChanged} isVpnChanged={isVpnChanged} handleVpnStatus={handleVpnStatus} key={uuidv4()}/>
        )}
    </MapContainer>

By default, there are three elements in the input data array, respectively, three markers are rendered. It could be that the popupopen event fires for the wrong token. which was clicked, but for everyone?