Currently I’m drawing the line by mousedown mousemove and mouseup, but I want to create a line points every time I clicked the mouse.

My way to create a line :

 const handleMouseDown = (e) => {
        if( mode === "Drawing")
        {
            const stage = e.target.getStage();
            const mousePos = stage.getRelativePointerPosition();
            const snappedPos = snapToGrid(mousePos.x, mousePos.y);
            setDrawing(true);
            setTempLine([snappedPos[0], snappedPos[1], snappedPos[0], snappedPos[1]]);
        }
    };

    const handleMouseMove = (e) => {
        if (drawing) {
            const stage = e.target.getStage();
            const mousePos = stage.getRelativePointerPosition();
            const snappedPos = snapToGrid(mousePos.x, mousePos.y);
            setTempLine([tempLine[0], tempLine[1], snappedPos[0], snappedPos[1]]);
        }
    };

    const handleMouseUp = () => {
        if (drawing) {
            setDrawing(false);
            if(tempLine[0] !== tempLine[2] || tempLine[1] !== tempLine[3]) 
            {
                dispatch(setNewLines(tempLine))//save in react-redux
            }
            setTempLine([]);
        }
    };

As on the code above, when the mousedown it create the start point of the line, and the end point after mouseup, but what I want to achive is like this:

Demo GIF

Any suggestion pls? thanks