Leaflet WMS layers - Legend control not working

Question

I'm having difficulties making my legend control work. I've loaded 3 WMS layers from Geoserver and declared their legends. I grouped the layers as Overlays and I have 2 basemaps. I found a code and adapted it as below to make a switch between the legends.What this does now is only displays Legend2. In all the examples I've seen online, the layers (be it declared as baselayers or overlays) do not overlay in the app, but are removed upon another layer selection.

Does this function work only for layer removal or should it work in my case too, and I'm missing something?

var overlayMaps = {
  "DropOut_Rates": DropOUT,
  "UAT3":TAU_L3,
  "Schools": Schools    
};

legend2.addTo(map);
currentLegend = legend2;

map.on('overlayadd', function (eventLayer) { 

  if (eventLayer.name === 'DropOut_Rates') { 
    map.removeControl(currentLegend); 
    currentLegend = legend2; 
    legend2.addTo(map); 
  } 
  else if (eventLayer.name === 'UAT3') { 
    map.removeControl(currentLegend); 
    currentLegend = legend3; 
    legend3.addTo(map); 
  } 
  else if (eventLayer.name === 'Schools') { 
    map.removeControl(currentLegend); 
    currentLegend = legend1; 
    legend1.addTo(map); 
  }
});

Answer 1

I found a code and adapted it as [shown] below

General piece of advice: Do not copy-paste code and expect it to work. Make an effort to understand what the code does, and why.

There is information missing from your code snippet. I'm seeing you're using a overlayadd map event, which according to the documentation fires when the user interacts with a layers control (an instance of L.Control.Layers).

Do you have a layers control in your code? How does its initialization look like? Does the overlayadd event fire when expected? What is the value of eventLayer in the event handler (use your browser's debugging capabilities)?