Strange redraw / render behavior uniformheatmap

I have a quite extensive code where I am able to draw a SVG annotation on top of heatmap. (please see video).

I am noticing strange behavior when I load the saved annotation and draw them on the screen. All of the them render out of place and remain there till one hovers with the mouse. as seen in video.

https://youtu.be/RiinjbGc6K8?si=u0BTL_B1Qz92ZiXt
strange behavior

my draw annotation code is below,

const drawAnnotation = (annotationList) => {
sciChartSurfaceRef?.current.suspendUpdates()
try {
annotationList.map(annotation => {
if (!sciChartSurfaceRef.current?.annotations?.getById(annotation.Id)) {
//console.log(annotation.Id, annotation.SVG)
annotation.createSVG(zoomdiff.current)
sciChartSurfaceRef.current?.annotations.add(
new ScalableAnnotation({
id: ${annotation.Id},
x1: annotation.DataBounds.shortestXinData,
x2: annotation.DataBounds.longestXinData,
y1: annotation.DataBounds.shortestYinData,
y2: annotation.DataBounds.longestYinData,
isEditable: ((annotation.UserId ? (annotation.UserId === userIdRef.current || annotationAuditor.current) : true) && annotation.Type === regionTypeRef.current),
isSelected: annotation.Selected,
yCoordinateMode: ECoordinateMode.DataValue,
xCoordinateMode: ECoordinateMode.DataValue,
verticalAnchorPoint: EVerticalAnchorPoint.Top,
horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
svgString: annotation.SVG ? new XMLSerializer().serializeToString(annotation.SVG.node()) : undefined,
isHidden: false,
selectionBoxStroke: “#FFFF00FF”,
selectionBoxThickness: 1,
metaData: [heatmapSeriesRef.current.dataSeriesProperty.arrayWidth, heatmapSeriesRef.current.dataSeriesProperty.arrayHeight]
})
)
} else {
sciChartSurfaceRef.current.annotations.getById(annotation.Id).svgString = new XMLSerializer().serializeToString(annotation.createSVG().node())
}
})
} finally {
sciChartSurfaceRef.current.resumeUpdates({ invalidateOnResume: true })
//sciChartSurfaceRef.current.invalidateElement({ force: true });
}