Adding zoom in zoom out and reset functionality to a react BPMN component

I am trying to add zoom in zoom out and reset functionality to my component.

While zooming in, it basically zooms in but only once and takes it to 100%.
While zooming out, it inverts the diagram.

Codesandbox - https://codesandbox.io/p/sandbox/nameless-grass-98fwsp-forked-6mrd82

Maybe i am not getting the correct container?

@nikku @Hadi_Jami is it something that we can achieve with bpmnjs i do see it in the documentation -

bpmn-js walkthrough | Toolkits | bpmn.io here

Update I got it to work -

https://codesandbox.io/p/sandbox/nameless-grass-98fwsp-forked-6mrd82?file=%2Fsrc%2FApp.tsx%3A248%2C5

the only defect remains is when i first click on zoom out it zooms in for some reason