Help with downloading Image

[dasriharshini]

I am trying to download the exported image but I am unable to view the downloaded image file. It says "It may be damaged or use a file format that Preview doesn’t recognize."

I was successful in storing the paths of the drawing but along with this I also wanted to download the image. Any help is highly appreciated!

const handleImage = async (canvas: ReactSketchCanvasRef) => {
 console.log("entered handleImage")
 const dataUrl = await canvas.exportImage("png");
 setExportedImage(dataUrl);
 if (!exportedImage) {
   alert("No image to download");
   return;
 }
 const link = document.createElement('a');
 link.href = exportedImage;
 link.download = 'sketch.png';
 link.type="image/png";
 link.click();
};

const handleCanvasOnChange = (e: any) => {
 const exportedCanvasPromise = canvasRef?.current?.exportPaths();
 exportedCanvasPromise?.then((result: any[]) => {
     localStorage.setItem('paths', JSON.stringify(result))
     setCanvas(result)
 }).catch((error: any) => {
     console.error(error);
 });
}

const handleNextButtonClick = (e: { preventDefault: () => void }) => {
handleImage(canvasRef.current as ReactSketchCanvasRef);
handleSubmit(e);
};

const handleSubmit = async (e: { preventDefault: () => void }) => {
 e.preventDefault();
 if (!description) {
   alert('Description is required');
   return;
 }
 localStorage.setItem('description', description);
 router.push('/participantDetails');
};

...
<Box width="400px" height="400px">
            <ReactSketchCanvas ref={canvasRef} onChange={handleCanvasOnChange} style={styles} strokeWidth={4} strokeColor="black" />
          </Box>
...
<Link href="/participantDetails">
          <Button size="3" onClick={handleNextButtonClick}>
            Next
          </Button>
        </Link>

What it shows me after downloading: