Update Drei OrbitControls with HTML buttons

Questions
1

Hi all! I have OrbitControls and OrtographicCamera. I’m trying to recreate the behaviour of controls.listenToKeyEvents(window) with these UI buttons:

image

I had no problem with the zoom since that is linked to the camera and I just did it like this:

 onClick={() => setCameraZoom((prev) => Math.abs(prev + 0.1))}

But now I do not know how to update the OrbitControls behaviour of moving on all four directions, which is handled natively with the keyboard by executing controls.listenToKeyEvents(window).

Tried emitting an event when clicking the button:

onClick={() => {
  controls2D.update()
  const evt = new KeyboardEvent('keydown', {
    bubbles: false,
    cancelable: false,
    key: 'ArrowUp',
    keyCode: 38,
  })

  controls2D.dispatchEvent(evt)
  controls2D.update()
}}

But this will not work, same as changing the target of the OrbitControls manually:

onClick={() => {
  setControls2D((prev) => ({
    ...prev,
    target: new Vector3(prev.target.x + 10, prev.target.y, prev.target.z),
  }))
}}

Any help is greatly appreciated.