如何使用reactjs / javascript在一个excel工作表中导出两个表？

import React, { useState } from 'react';
import XLSX from 'xlsx';

const ExportExcel = () => {
  const [table1Data, setTable1Data] = useState([
    ['Name', 'Age'],
    ['John', 25],
    ['Jane', 30],
  ]);

  const [table2Data, setTable2Data] = useState([
    ['Product', 'Price'],
    ['Apple', 1.99],
    ['Banana', 0.99],
  ]);

  const exportToExcel = () => {
    const workbook = XLSX.utils.book_new();
    const table1Sheet = XLSX.utils.aoa_to_sheet(table1Data);
    const table2Sheet = XLSX.utils.aoa_to_sheet(table2Data);

    XLSX.utils.book_append_sheet(workbook, table1Sheet, 'Table 1');
    XLSX.utils.book_append_sheet(workbook, table2Sheet, 'Table 2');

    XLSX.writeFile(workbook, 'tables.xlsx');
  };

  return (
    <div>
      <table>
        <thead>
          {table1Data.map((row, rowIndex) => (
            <tr key={rowIndex}>
              {row.map((cell, cellIndex) => (
                <th key={cellIndex}>{cell}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table1Data.slice(1).map((row, rowIndex) => (
            <tr key={rowIndex}>
              {row.map((cell, cellIndex) => (
                <td key={cellIndex}>{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      <table>
        <thead>
          {table2Data.map((row, rowIndex) => (
            <tr key={rowIndex}>
              {row.map((cell, cellIndex) => (
                <th key={cellIndex}>{cell}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table2Data.slice(1).map((row, rowIndex) => (
            <tr key={rowIndex}>
              {row.map((cell, cellIndex) => (
                <td key={cellIndex}>{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      <button onClick={exportToExcel}>Export to Excel</button>
    </div>
  );
};

export default ExportExcel;