如何将给定数量的列作为div元素附加到react中的另一个div元素上

import React from 'react';

function App() {
  // 列的数量
  const columnCount = 5;

  // 生成给定数量的列
  const columns = Array.from({ length: columnCount }, (_, index) => (
    <div key={index} className="column">
      {/* 列的内容 */}
    </div>
  ));

  return (
    <div className="container">
      {/* 将生成的列附加到另一个div元素上 */}
      {columns}
    </div>
  );
}

export default App;

<style>
  .container {
    display: flex;
  }

  .column {
    flex: 1;
    background-color: #eee;
    margin: 5px;
    padding: 10px;
    text-align: center;
  }
</style>