react-data-export is not rendering in my react app

[amanmobikasa]

Hi to all

i am using "react": "^18.3.1", and "react-data-export": "^0.6.0", but it gives me the error.
here is a code block :
`import React, { useEffect } from 'react';
import ReactExport from 'react-data-export';
import * as XLSX from 'xlsx';
// import * as cptable from 'cptable';
// import cptableFixedXlsxStyle from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'

// XLSX.set_cptable(cptableFixedXlsxStyle);

const loadCptable = () => {
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/cpexcel.full.min.js';
script.onload = () => {
XLSX.set_cptable(window.cptable);
};
document.body.appendChild(script);
};

const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;

const multiDataSet = [
{
columns: [
{title: "Headings", width: {wpx: 80}},//pixels width
{title: "Text Style", width: {wch: 40}},//char width
{title: "Colors", width: {wpx: 90}},
],
data: [
[
{value: "H1", style: {font: {sz: "24", bold: true}}},
{value: "Bold", style: {font: {bold: true}}},
{value: "Red", style: {fill: {patternType: "solid", fgColor: {rgb: "FFFF0000"}}}},
],
[
{value: "H2", style: {font: {sz: "18", bold: true}}},
{value: "underline", style: {font: {underline: true}}},
{value: "Blue", style: {fill: {patternType: "solid", fgColor: {rgb: "FF0000FF"}}}},
],
[
{value: "H3", style: {font: {sz: "14", bold: true}}},
{value: "italic", style: {font: {italic: true}}},
{value: "Green", style: {fill: {patternType: "solid", fgColor: {rgb: "FF00FF00"}}}},
],
[
{value: "H4", style: {font: {sz: "12", bold: true}}},
{value: "strike", style: {font: {strike: true}}},
{value: "Orange", style: {fill: {patternType: "solid", fgColor: {rgb: "FFF86B00"}}}},
],
[
{value: "H5", style: {font: {sz: "10.5", bold: true}}},
{value: "outline", style: {font: {outline: true}}},
{value: "Yellow", style: {fill: {patternType: "solid", fgColor: {rgb: "FFFFFF00"}}}},
],
[
{value: "H6", style: {font: {sz: "7.5", bold: true}}},
{value: "shadow", style: {font: {shadow: true}}},
{value: "Light Blue", style: {fill: {patternType: "solid", fgColor: {rgb: "FFCCEEFF"}}}}
]
]
}
];

export function ExportCSV(){
useEffect(() => {
loadCptable();
}, []);
return (

<ExcelFile element={Download Data With Styles}>

);
}`

and the error i got is :
react-data-export.js?v=a866f4bc:49827 Uncaught ReferenceError: cptable is not defined
at make_xlsx (react-data-export.js?v=a866f4bc:49827:53)
at node_modules/tempa-xlsx/xlsx.js (react-data-export.js?v=a866f4bc:63775:7)
at __require2 (chunk-UP2VWCW5.js?v=a866f4bc:15:50)
at node_modules/react-data-export/dist/ExcelPlugin/components/ExcelFile.js (react-data-export.js?v=a866f4bc:64129:22)
at __require2 (chunk-UP2VWCW5.js?v=a866f4bc:15:50)
at node_modules/react-data-export/dist/index.js (react-data-export.js?v=a866f4bc:64295:22)
at __require2 (chunk-UP2VWCW5.js?v=a866f4bc:15:50)
at react-data-export.js?v=a866f4bc:64317:16

if anyone know how to fix this please let me know