Custom React Node with zoom-canvas and drag-canvas displaces the node.

Hello, I am using following packages version in my react typescript applciation:
@antv/g6=5.0.7
@antv/g6-extension-react=0.1.2
G6 graph layout options are:
`
layout: {
type: 'd3-force',
animation: true,
autoFit: 'view',
manyBody: {
strength: -80,
theta: 1
},
link: {
strength: 1,
}
}`

https://github.com/user-attachments/assets/d80377a3-b6ad-4453-9df2-b731bc0ba61d

I am using a custom react node using import { ReactNode } from '@antv/g6-extension-react'; It is span element with image/icon inside it. The issue (as seen in video) is that when using custom react nodes, canvas dragging and zooming behaviors displaces the node. Is there any way to solve it?

Reproduce the displacement with G6 5.0.7, @antv/g6-extension-react 0.1.2, a ReactNode span containing an image or icon, and the shown d3-force layout. Start by tracing the ReactNode integration together with canvas drag and zoom behavior. Done means the custom node remains aligned with its graph position while dragging and zooming.

Written by the indexing model from the issue text.