I want to save the information about the stroke (X and Y coordinates) and images of the drawings made but I am unable to do so. The handleExportImage is not being triggered.

I am using this React Canvas :

Sketch.tsx

"use client";

import React, { useState, useRef } from 'react';
import { Box, Flex, Text, TextArea, Button, Strong } from '@radix-ui/themes';
import Link from 'next/link';
import { ReactSketchCanvas, type ReactSketchCanvasRef } from 'react-sketch-canvas';
import { useRouter } from 'next/navigation';

const styles = {
  border: '0.25rem solid #3E63DD',
  borderRadius: '0.75rem',
};

function Sketch() {
  const canvasRef = useRef<ReactSketchCanvasRef>(null);
  const [description, setDescription] = useState('');
  const router = useRouter();

  const handleExportImage: () => Promise<void> = async () => {
    console.log("entered");
    if (canvasRef.current) {
      try {
        const data = await canvasRef.current.exportImage('png');
        console.log('Exported image data:', data);
      } catch (error) {
        console.error('Error exporting image:', error);
      }
    }
  };
  

  const handleSubmit = async (e: { preventDefault: () => void }) => {
    e.preventDefault();
    await handleExportImage();

    if (!description) {
      alert('Description is required');
      return;
    }

    localStorage.setItem('description', description);
    router.push('/participantDetails');
  };

  return (
    <>
      <Flex direction="column" ml="9" maxWidth="1000px" gap="4" justify="center">
        <Text mb="6" size="5" weight="medium">
          <Strong>Scenario: </Strong> Imagine you are interested in the number of World Heritage Sites in{' '}
          <Strong>Norway, Denmark, and Sweden </Strong>over two different years: 2004 and 2022. In 2004, Norway had 5
          sites, Denmark had 4, and Sweden had 13. By 2022, the numbers increased to 8 sites for Norway, 10 for Denmark,
          and 15 for Sweden. We will ask you to draw how you would anticipate this data should be visually communicated to
          you in a clear and concise manner.
        </Text>
      </Flex>

      <Flex direction="row" ml="9">
        <Flex direction="column" gap="2" mr="9">
          <Text mt="4" size="5" weight="medium">
            How would you represent the given information?{' '}
          </Text>
          <Text size="5" weight="medium">You can sketch in this space.</Text>
          <Box width="400px" height="400px">
            <ReactSketchCanvas ref={canvasRef} style={styles} strokeWidth={4} strokeColor="black" />
          </Box>
        </Flex>
        <Flex direction="column" ml="4" minWidth="500px" gap="4">
          <Text mt="4" mb="6" size="5" weight="medium">
            Describe your sketch
          </Text>
          <TextArea
            onChange={(e) => setDescription(e.target.value)}
            value={description}
            size="3"
            resize="both"
            placeholder="As soon as I..."
          />
        </Flex>
      </Flex>
      <Flex align="center" justify="center" mt="6">
        <Link href="/participantDetails">
          <Button size="3" onClick={handleSubmit}>
            Next
          </Button>
        </Link>
      </Flex>
    </>
  );
}

export default Sketch;

Schema

import mongoose, { Schema } from "mongoose";

const participantSchema = new Schema(
  {
    prolificId: String,
    description: String,  
    gender: String,
    drawingMethod: String,
    skills: String,
    feedback: String

  },
  {
    timestamps: true,
  }
);

const Participant = mongoose.models.Participant || mongoose.model("Participant", participantSchema);

export default Participant;

Any help is highly appreciated!

I tried to use the exportImage() method but it is not exporting images. I also want to know how I could implement exportPaths() method.