How do you prevent a custom control from zooming or clicking on the map

I've created a custom control under the zoom control, and when I click on it, the click on the map is triggered, which I don't want, and the same applies if I double-click, the zoom is triggered.

I've managed to fix the click triggering with an e.stopPropagation() but I don't know how to manage the zoom.

let MyControlClass =  L.Control.extend({  
  options: {
    position: 'topleft',
  },

  onAdd: function(map) {
    this.map = map;

    var div = L.DomUtil.create('div', 'leaflet-bar my-control');
    var flyToButton = L.DomUtil.create('button', 'my-button-class', div);

    flyToButton.innerHTML = `<a href="#" role="button" title="Voler vers" class="">
                          <i class="fa-solid fa-reply-all fa-flip-horizontal"></i>
                        </a>`;

    L.DomEvent.on(flyToButton, 'click', function(e) {
      e.stopPropagation();
    }, this);

    return div;
  }
});
let myControl = new MyControlClass().addTo(map);

You could use L.DomEvent.disableClickPropagation:

const div = L.DomUtil.create('div', 'leaflet-bar my-control');
// ...
L.DomEvent.disableClickPropagation(div);