canvas not adding image from url (base 64)

Question

i am working on project where i want to create a min preview for canvas. so when any change happen to canvas eg: user added text to canvas , the canvas will be converted to DataURL, and then i want to add this base64 to another canvas but it is not working any idea on how can i fix this issue. ?

  const initCanvas = useCallback((ref: any, design: FabricCanvas) => {
        // @ts-ignore
        const canvas = new fabric.StaticCanvas(ref, {
            width: previewCanvasProperties.width,
            height: previewCanvasProperties.height,
            left: previewCanvasProperties.left,
            top: previewCanvasProperties.top,
        });
        var imageData = new Image();
        imageData.src = dataUrl;
        imageData.onload = function () {
            var imgInstance = new fabric.Image(imageData);
            canvas.add(imgInstance);
            canvas.renderAll();
        };
        // @ts-ignore
        canvas.renderAll();
        return canvas;
    }, []);
    return {
        initCanvas,
    };
};