How can i add clickable copy button in react-apexchart tooltip?

[st-arif]

I am using react-apexchart to show data in chart, there in tooltip i wanted to keep clickable copy button to copy plot data, so i added custom tooltip in that added copy button but this copy button is not clickable from mouse, instead working from keyboard by selecting and entering.

Below is the code in that i am stuck on how to do tooltip copy button to cliakcable

import React, { useRef, useState, useEffect } from 'react';
import Chart from 'react-apexcharts';

function ShowChart({ data }) {
useEffect(() => {
// Event capturing to handle clicks at the document level
const handleClick = (event) => {
// Check if the clicked element is the copy button
if (event.target.id === 'copyButton') {
const tooltipContent = document.getElementById(
'customTooltipContent'
).innerText;
navigator.clipboard
.writeText(tooltipContent)
.then(() => {
console.log('Text copied to clipboard');
})
.catch((error) => {
console.error('Failed to copy text', error);
});
}

  // Check if the clicked element is the external link
  if (event.target.id === 'externalLink') {
    event.preventDefault();
    window.open(event.target.href, '_blank');
  }
};

// Add click event listener to the document
document.addEventListener('click', handleClick);

// Cleanup the event listener on component unmount
return () => {
  document.removeEventListener('click', handleClick);
};

}, []);

const options = {
chart: {
height: 180,
width: '100%',
type: 'scatter',
},
series: [
{
name: 'Series 1',
data: [
{
x: 100,
y: 50,
product: 'name',
info: 'info',
site: 'name',
},
{
x: 150,
y: 55,
product: 'name',
info: 'info',
site: 'name',
},
{
x: 130,
y: 44,
product: 'name',
info: 'info',
site: 'name',
},
],
},
],
xaxis: {
type: 'numeric',
},
tooltip: {
custom: ({ series, seriesIndex, dataPointIndex, w }) => {
const datat = w.globals.initialSeries[seriesIndex].data[dataPointIndex];

    return `
      <div id="customTooltipContent">
        <ul>
          <li><b>Price</b>: ${datat.x}</li>
          <li><b>Number</b>: ${datat.y}</li>
          <li><b>Product</b>: ${datat.product}</li>
          <li><b>Info</b>: ${datat.info}</li>
          <li><b>Site</b>: ${datat.site}</li>
        </ul>
        <button type="button" id="copyButton">Copy</button>
        <a href="https://www.w3schools.com" id="externalLink">Visit W3Schools.com</a>
      </div>
    `;
  },
},

};
return (

);
}

export default ShowChart;