How to use For Loop inside the map function in ReactJS

...

function App() {
  const [items, setItems] = useState([]);
  const [products, setProducts] = useState([]);

  const renderProducts = (d, products)=> {
    const result = []
    for (var i = 0; i < d.ID; i++) {  
      let product = products.map((c) =>
        c.ID === 1 ? (         
            <tr key={c.ID}>
              <td>{c.ArticleNo}</td>
              <td>{c.ProductName}</td>
              <td>{c.Quantity}</td>
              <td>{c.Price}</td>
              <td>{c.TotalAmount}</td>
            </tr>
        ) : null                              
        )
        result.push(product)
      }
    return result
  }

  ... 

  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>
                  {renderProducts(d, products)}
                </tbody>
              </Table>
            </div>
          }
        />
      ))}
    </div>
  );
}
export default App;