Estoy tratando de descargar el archivo csv de las entradas de la tabla usando react-csv .

Pero cada vez que intento seguir los pasos para descargar los datos y exportarlos a formato CSV me sale este error:

Los datos deben ser una "cadena", "matriz de matrices" O "matriz de objetos"

aquí está mi código:

 import React, { useEffect, useRef, useState } from "react"; import { CSVLink } from "react-csv"; export default function App() { const [data, setdata] = React.useState(""); const [tableCellsData, setTableCellsData] = useState([]); const csvLink=useRef() const [bDownloadReady, setDownloadReady] = useState(false); useEffect(() => { if (csvLink && csvLink.current && bDownloadReady) { csvLink.current.link.click(); setDownloadReady(false); } }, [bDownloadReady]); const getUniqueKeyFromArrayIndex = (rowNum, columnNum) => { return `${rowNum}-${columnNum}`; }; const onChangeHandler = (e) => { console.log(e.target.name, e.target.value); setTableCellsData({ ...tableCellsData, [e.target.name]: e.target.value }); }; const generateTable = () => { let table = []; for (let i = 0; i < 3; i++) { let children = []; for (let j = 0; j < 4; j++) { children.push( <td> <input name={getUniqueKeyFromArrayIndex(i, j)} defaultValue="" Value={data} onChange={onChangeHandler} /> </td> ); } table.push( <tr key={i}> <td>{children}</td> </tr> ); } return table; }; const tabled=Object.keys(tableCellsData) function clickHandler(actionType){ if (actionType === 'DOWNLOAD') { setDownloadReady(true); } } return ( <> <table>{generateTable()}</table> <button onClick={(e)=>clickHandler('DOWNLOAD')}>click</button> <CSVLink data={tabled} filename="data.csv" className="hidden" ref={csvLink} target="_blank" /> </> ); }