Leaflet-CanvasLayer, how do i add it to a layer list?

Question

I want to add a tiff image to a leaflet map. I have successfully added this(https://codepen.io/VictorVelarde/pen/ZKJWMb/)

var tiff = "https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/data/tz850.tiff";
fetch(tiff).then(r => r.arrayBuffer()).then(function(buffer) {
  var s = L.ScalarField.fromGeoTIFF(buffer);
  let layer = L.canvasLayer.scalarField(s).addTo(map);
  layer.on("click", function(e) {
    if (e.value !== null) {
      let popup = L.popup()
      .setLatLng(e.latlng)
      .setContent(`${e.value}`)
      .openOn(map);
    }
  });

  map.fitBounds(layer.getBounds());
});

to my map but now I want to add it to the layer list. For the layers, I use the standard layercontrol with added baseTree - with several TileLayers and overlaysTree with some point layers.

How to overlay tiff image on TileLayers with option to turn it on and off ?