Synchronize Axis and Image Updates on Dragging with React Konva

Question

I don't write much front-end, so I'm not familiar with how to use react.

My original requirement is to draw a line graph and allow drag and zoom, but the width between two points on the line graph are all different, i.e. my data is a ternary of x, y and width. I haven't found a library that meets my needs, so if there is one, please let me know directly.

So I'm using konvas to draw the line graph and setting onDrag to update the coordinate system so that it updates in real time as I zoom. However, the update of the axes is always slower than the update of the image. I suspect it has something to do with react's rendering strategy, but I can't find my way around. Here's the onDrag function :

    const handleDrag = (e:Konva.KonvaEventObject<DragEvent>) => {
        const newX = e.target.x();
        const newY = e.target.y();
        axis?.updateXs(newX, newY, layerScale, layerScale)
        setLayerX(newX);
        setLayerY(newY);
    }

Here's the render code:

<Stage
                width={width}
                height={height}
                onWheel={handleWheel}
            <Stage width={width} height={height}
                <Layer
                    draggable
                    onDragStart={handleDrag}
                    onDragMove={handleDrag}
                    onDragEnd={handleDrag}
                    x={layerX}
                    y={layerY}
                    scaleX={layerScale}
                    scaleY={layerScale}}
                    <BandsRenderer data={processedData} />
                    <Rect
                        x={0}
                        y={0}
                        width={width}
                        height={height}
                        fill={"transparent"}
                    />
                </Layer
                <Layer>
                    {
                        axis?.render()
                    }
                </Layer>
                <Layer
                    <Rect
                        x={0}
                        y={0}
                        width={width * 0.1}
                        height={height}
                        fill={"white"}
                    />
                </Layer
            </Stage>

I've tried changing the axis to a reference but it doesn't work, I'm not sure if there's something wrong with the way I'm using it or if the ref doesn't work for this.