Подскажите, пожалуйста, почему в ZoomPanel передается stageRef.current равное null, в

чем ошибка и куда копать?

import ZoomPanel from '../zoom-panel/zoom-panel';
import { Stage } from 'konva/lib/Stage';
import { Circle as KonvaCircle, Stage as KonvaStage, Layer, Rect as KonvaRect } from 'react-konva';
import { Fragment, useEffect, useRef } from 'react';
import Konva from 'konva';

type CanvasPanelProps = {
width: number;
height: number;
}

function CanvasPanel(props: CanvasPanelProps) {

const stageRef = useRef<Stage>(null);

useEffect(() => {
const stage = stageRef.current;
if (!stage) {
return;
}

var layer = new Konva.Layer();
stage.add(layer);

var rect1 = new Konva.Rect({
x: 60,
y: 130,
width: 100,
height: 90,
fill: 'red',
name: 'rect',
draggable: true,
});

layer.add(rect1);

}, [stageRef]);

return (
<Fragment>
<KonvaStage
ref={stageRef}
className="canvas-container"
width={window.innerWidth}
height={window.innerHeight}
>
<Layer>
<KonvaRect
x={100}
y={100}
width={300}
height={300}
stroke={'black'}
fill={'lightgrey'}
/>
</Layer>
</KonvaStage>
<ZoomPanel stage={stageRef.current!} />
</Fragment>
);
}

export default CanvasPanel;

в зависимости useEffect нет смысла рефы ставить, они не вызывают обновление