Drag doesn't work well when the container is scaled

Question

I want to create a canvas with draggable circles. The canvas works well for my needs. It scales and pans and the circles also work well when the canvas has a scale = 1. but when you zoom into the canvas and try to drag around the circles, they lag and lead the cursor depending on the direction of drag. when you scale in the drag is faster than mouse movement. when you scale out the drag is slower than mouse movement. Here's my drag function.

handleMouseMove = ({ clientX, clientY }) => {
        const { isDragging } = this.state
        const { onDrag, scale } = this.props

        if (!isDragging) {
            return
        }

        this.setState(
            (prevState) => ({
                translateX:
                    (clientX - prevState.originalX + prevState.lastTranslateX) / scale,
                translateY:
                    (clientY - prevState.originalY + prevState.lastTranslateY)  / scale,
            }),
            () => {
                if (onDrag) {
                    onDrag({
                        translateX: this.state.translateX,
                        translateY: this.state.translateY,
                    })
                }
            }
        )
    }

I am passing the scale of the parent as a prop to the circle and dividing it in the translate state but it's not doing the trick.. It works fine when scale = 1 though. Please help if you happen to see something I am doing wrong... Thanks in advance.

Answer 1

Sorry guys... realised the answer after I had posted.... Just changed to this..

this.setState(
            (prevState) => ({
                translateX:
                    (clientX - prevState.originalX) / scale + prevState.lastTranslateX,
                translateY:
                    (clientY - prevState.originalY)  / scale + prevState.lastTranslateY,
            }),
            () => {
                if (onDrag) {
                    onDrag({
                        translateX: this.state.translateX,
                        translateY: this.state.translateY,
                    })
                }
            }
        )