I have 2 marker icons greenIcon and redIcon, how to make it so that when the marker is active, redIcon is applied. I have several markers on the map. That is, it is necessary that the icon of the active marker changes and when another marker is selected, the previous one returns to its original state, i.e. greenIcon is displayed back if another marker is selected

    // Latitude, longitude, Zoom Level
var map = L.map('map__riot').setView([0,0], 1.7);
// TileLayer
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png', {
attribution: '',
minZoom: 0,
maxZoom: 20,
ext: 'png'
}).addTo(map);
var greenIcon = L.icon({
iconUrl: 'map-pin@2x.png',
iconSize:     [64, 64], // size of the icon
iconAnchor: [32, 64],
popupAnchor: [0, -25]
});

var redIcon = L.icon({
iconUrl: 'map-pin-dark@2x.png',
iconSize:     [64, 64], // size of the icon
iconAnchor: [32, 64],
popupAnchor: [0, -25]
});
for (const site of sites) {
marker = new L.marker([site.lat, site.lng],{icon: greenIcon})
.on('click', function (e) {
document.getElementById('titler').textContent = site.address 
})
.addTo(map);
}