i'm trying to create a clickable grid in react and leaflet, i want to display a grid over my map, something similar to this: add mouse event to svg <pattern>, detect grid hover. i built the grid in this way:

 var tiles = new L.GridLayer();
var p = new L.featureGroup(tiles);

console.log(p);
setProva(tiles);
tiles.createTile = function() {
  var rows = 5;
  var cols = 5;
  var i = 0;
  tile = L.DomUtil.create('table', 'leaflet-tile');
  tile.className = 'grid';
  
  for (var r=0;r<rows;++r){
    var tr = tile.appendChild(document.createElement('tr'));
    for (var c=0;c<cols;++c){
      var cell = tr.appendChild(document.createElement('td'));
      cell.innerHTML = ++i;

      cell.addEventListener('click',(function(el,r,c,i){
        return function(){ callback(el,r,c,i); }
       })(cell,r,c,i),false);
    
    }

and this is the function that manages the event:

    function callback(el,row,col,i){
  el.className='clicked';
  if (lastClicked) lastClicked.className='';
  lastClicked = el;
}

but when i click, the only event recorded is the click on the map. I think, that i need to manage the click event on the map and propagate over the child component but i cant understand how... Can someone help me? Thanks a lot!