Controlled shapes

In order to change shapes configs dynamically, you first need to get the Stage object from <AnnotationViewer /> using getStage prop and store it in a ref.

const annotationViewerStageRef = useRef<null | Stage>(null)
const setAnnotationViewerStage = (stage: Stage) => {  annotationViewerStageRef.current = stage}
return (  <AnnotationViewer    /// other props    getStage={setAnnotationViewerStage}  />)

Then use utils function to change shape configs and trigger canvas redraw when it's needed using setShapeConfig, drawShape and drawLayer.

Full example