Is there a way to resume paused panzoom while holding mousedown?

[예린쓰]

I am making a function for separating click and drag on panzoom.
Was planning to pause panzoom using panzoom.pause() and then set isClick to true and wait for a sec using setTimeout().
If the user emits mouseup event before the timer end, the event is supposed to do brush stuff, and if the timer ends and user is still holding the mousedown, do panzoom.resume() to allow the dragging.
I have noticed that on holding mousedown, panzoom.resume() => panzoom.pause() will work by the timer interval,
but panzoom.pause() => panzoom.resume() would not work.

Is there a way to solve this?

When holding mouseclick, below code (resume => pause) works fine
After 1 seconds of dragging, the panzoom is paused when the setTimeout() is executed.

useEffect(() => {
    if(isClick) panzoomInstance?.resume();
    else panzoomInstance?.pause(); 
  }, [isClick, panzoomInstance]);

But this doesn't work (pause => resume)

useEffect(() => {
    if(isClick) panzoomInstance?.pause();
    else panzoomInstance?.resume(); 
}, [isClick, panzoomInstance]);

I am using useState and setTimeout to keep track of timer.

const [isClick, setIsClick] = useState(false);
const onMouseDown= (e: MouseEvent) => {
    e.preventDefault();
    setIsClick(true);
    setTimeout(() => setIsClick(false), 1000);
};

[예린쓰]

Found out that the problem is panzoom.pause() removes mouse event listener and then panzoom.resume() add mouse event listener. But panzoom.resume() will not work since added mouse event listener will not activate until mouse click is up and then clicked again. Trying to find the way to use the mouse right click instead of mouse left click so closing this issue.