How to assign data values in array using ReactJS

import React from 'react'
import { Table } from 'react-bootstrap'
import * as XLSX from 'xlsx'
import Accordion from './component/accordion'
import './App.css'

function App() {
  var items = [];
  
  const readExcel=(file) => {
    const promise = new Promise((resolve, reject)=>{
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(file);
      fileReader.onload=(e)=>{
        const bufferArray = e.target.result;
        const wb = {SheetNames:[], Sheets:{}};
        const ws1 = XLSX.read(bufferArray, {type:"buffer"}).Sheets.Sheet1;
        const ws2 = XLSX.read(bufferArray, {type:"buffer"}).Sheets.Sheet2;
        
        wb.SheetNames.push("Sheet1"); wb.Sheets["Sheet1"] = ws1;
        wb.SheetNames.push("Sheet2"); wb.Sheets["Sheet2"] = ws2;
     
        const data1 = XLSX.utils.sheet_to_json(ws1);
        const data2 = XLSX.utils.sheet_to_json(ws2);

        resolve([data1, data2]);
      };
      fileReader.onerror=(error) => {
        reject(error);
      };
    });
    promise.then((excelData) => {
      items.push(excelData);
      console.log(excelData);
    });
  };
  return(
    <div className="container-fluid">
      <section className="heading">
        <h4>Products Details</h4>
        <input type="file" className="input-field" onChange={(e) =>{
          const file=e.target.files[0];
          readExcel(file);
        }} />
      </section>
      {items.map((d) => (
        <Accordion 
          title={
            <div>
              <tr key={d.ID} className="btn-heading">
                <td>{d.ID}</td>
                <td>{d.Mail}</td>
                <td>{d.Name}</td>
                <td>{d.PhoneNo}</td>
                <td>{d.City}</td>
                <td>{d.Date}</td>
                <td>{d.Time}</td>
              </tr>
            </div>
          }
          content={
            <div>
              <p className="header">
                  <span className="header-content">Shipping Address:</span>
                  292 Naqshband Colony. Near rabbania Mosque. Multan
              </p>
              <Table size="sm">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Article No</th>
                    <th>Product Name</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Total Amount</th>
                  </tr>
                </thead>
                <tbody>
                  {items.map((c) =>(
                    <tr key={c.ArticleNo}>
                      <td>{c.ArticleNo}</td>
                      <td>{c.ProductName}</td>
                      <td>{c.Quantity}</td>
                      <td>{c.Price}</td>
                      <td>{c.TotalAmount}</td>
                    </tr>
                  ))}
                </tbody>
              </Table>
             </div>
          }
        />
      ))}
    </div>
  );
}
export default App;