Estoy tratando de hacer una hoja de Excel con una función de javascript en React, pero cuando intento ingresar a la página, el botón que tiene onClick no funciona.

 export default function DescargaExcelHTML() { const descargaExcel = (tableID, filename = "") => { console.log(tableID); let downloadLink; let datatype = "application/vnd.ms-excel"; let tableSelect = document.getElementById(tableID); let tableHTML = tableSelect.outerHTML.replace(/ /g, "%20"); filename = filename ? filename + ".xlsx" : "excel_data.xlsx"; downloadLink = document.createElement("a"); document.body.appendChild(downloadLink); if (navigator.msSaveOrOpenBlob) { let blob = new Blob(["\ufeff", tableHTML], { type: datatype }); navigator.msSaveOrOpenBlob(blob, filename); } else { downloadLink.href = "data:" + datatype + "," + tableHTML; downloadLink.download = filename; downloadLink.click(); } }; return ( <> <div className="overflow-x-auto"> <table id="prueba" className="table w-full"> <thead> <tr> <th></th> <th>Name</th> <th>Job</th> <th>Favorite Color</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>Cy Ganderton</td> <td>Quality Control Specialist</td> <td>Blue</td> </tr> </tbody> </table> </div> <button className="btn btn-primary" onClick={descargaExcel("prueba", "pruebaDescarga")} > Download Excel </button> </> ); }

Además, cuando actualizo la página, aparece un error de HTML externo:

Uncaught TypeError: Cannot read properties of null (reading 'outerHTML') en la línea let tableHTML = tableSelect.outerHTML.replace(/ /g, "%20");