map a multi dimensional array

//This is in React framework!

import "./styles.css";

let sheets = [];

const sheet1 = {
  name: "sheet 1",
  cells: [{ cellAddress: "A1", cellName: "customers" }]
};
const sheet2 = {
  name: "sheet 2",
  cells: [{ cellAddress: "A1", cellName: "cars" }]
};
const sheet3 = {
  name: "sheet 3",
  cells: [{ cellAddress: "A1", cellName: "bikes" }]
};

const cell1 = { cellAddress: "B1", cellName: "Customer Name" };
const cell2 = { cellAddress: "B1", cellName: "Car Name" };
const cell3 = { cellAddress: "B1", cellName: "Bike name" };
const cell4 = { cellAddress: "C1", cellName: "Customer Surname" };
const cell5 = { cellAddress: "C1", cellName: "Car Model" };
const cell6 = { cellAddress: "C1", cellName: "Bike Model" };

sheets.push(sheet1, sheet2, sheet3);

//how to push the cells to the sheets?
sheets[0].cells.push(cell1);
sheets[1].cells.push(cell2);
sheets[2].cells.push(cell3);
sheets[0].cells.push(cell4);
sheets[1].cells.push(cell5);
sheets[2].cells.push(cell6);

console.table(sheets);
console.log(sheets[0].cells);

//what i want to achieve, is first map a div for each sheet,
//Then Map its children for each subsequent cell for that sheet.

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {sheets.map((sht) => (
        <div key={sht.name}>
          <h1>{sht.name}</h1>
          {sht.cells.map((cells) => (
            <h4 key={cells.cellAddress}>
              {cells.cellAddress} {cells.cellName}
            </h4>
          ))}
        </div>
      ))}
    </div>
  );
}