How can i add CanvasLayer.Field using Leaflet Control Tree ?

[nixsbg]

I successfully added the TIFF to my map using this code:

var tiff = "img/tifftest.tiff";
fetch(tiff)
.then((r) => r.arrayBuffer())
.then(function (buffer) {
var s = L.ScalarField.fromGeoTIFF(buffer);
let layer = L.canvasLayer
.scalarField(s, {
opacity: 0.7,
color: chroma
.scale(["#1a9641", "#ffff6d", "#ec344c", "#d7191c"])
.domain(s.range),
})
.addTo(map);
layer.on("click", function (e) {
if (e.value !== null) {
let v = e.value.toFixed(0);
let html = <span class="popupText"><strong>Mean Wind Speed:</strong> ${e.value} m/s</span>;
let popup = L.popup()
.setLatLng(e.latlng)
.setContent(html)
.openOn(map);
}
});
map.fitBounds(layer.getBounds());
});`

But now I want to add it to the Leaflet Control Tree so it can be toggled on and off as a layer.
How can I do it?