I'm trying to make an Excel Sheet with a javascript function in React, but when I try to enter to the page, and the button which has the onClick is not working.

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>
    </>
  );
}

Also when I refresh the page I'm getting an outerHTML error:

Uncaught TypeError: Cannot read properties of null (reading 'outerHTML') at line let tableHTML = tableSelect.outerHTML.replace(/ /g, "%20");