Capturing a screenshot of a React ApexCharts component using use-screenshot-hook

Question

I'm trying to capture a screenshot of a React ApexCharts component in my React application using the use-screenshot-hook library. Here's the relevant code:

import React, { useState, useCallback } from 'react';
import Chart from 'react-apexcharts';
import { useScreenshot } from 'use-screenshot-hook';

const App = () => {
  const [chartData, setChartData] = useState({
    options: {
      chart: {
        id: 'apexchart-example'
      },
      xaxis: {
        categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
      }
    },
    series: [{
      name: 'series-1',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }]
  });

  const { takeScreenshot } = useScreenshot();

  const handleCaptureScreenshot = useCallback(async () => {
    const screenshot = await takeScreenshot();
    // Handle the screenshot, e.g., save it or display it
    console.log('Screenshot captured:', screenshot);
  }, [takeScreenshot]);

  return (
    <div>
      <Chart options={chartData.options} series={chartData.series} type="bar" width={500} height={320} />
      <button onClick={handleCaptureScreenshot}>Capture Screenshot</button>
    </div>
  );
};

export default App;

However, it seems that the screenshot is not being captured as expected. I've checked the documentation for use-screenshot-hook, but I might be missing something. Could someone please guide me on how to properly use use-screenshot-hook with React ApexCharts or suggest an alternative approach to capture screenshots of specific React components?