React组件中map循环：如何为创建的div元素添加行号？

.container {
  overflow: hidden;
  position: relative;
}

.left-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  overflow: hidden;
}

.right-box {
  margin-left: 19px;
}

import React from "react";

const App = () => {
  const itemData = new Array(50).fill(0);
  const indexData = new Array(20).fill(0);

  return (
    <div className="container">
      <div className="left-box"> {/* 左侧的行号容器 */}
        {indexData.map((item, index) => (
          <div key={index} style={{ fontSize: "10px", height: "20px" }}>
            {index}
          </div>
        ))}
      </div>

      {/* 右侧的方格容器 */}
      <div className="right-box">
        {itemData.map((item, index) => (
          <div
            key={index}
            style={{
              display: "inline-block",
              width: "9px",
              height: "9px",
              margin: "2px",
              backgroundColor: item.selected ? "green" : "lightgreen",
            }}
          />
        ))}
      </div>
    </div>
  );
};

export default App;