Predefined events override manual transformations

[l0drex]

I have the following code:

let canvas = d3.select("#canvas")
let canvasTransform = d3.zoom()

canvas.call(canvasTransform.on("zoom", event => canvas.attr("transform", event.transform)

function scale(delta) {
    canvasTransform.scaleBy(canvas, delta, [focus.x, focus.y]
}

function move(dx, dy) {
    canvasTransform.translateBy(outer, dx, dy)
}

This works, but there is one problem: when I call one of the above functions and then use the mouse to zoom or translate, the manual transformation applied by the functions above are ignored. To me, it seems like they use completely different transformation states.

Am I doing something wrong, or is this a bug in d3-zoom?