同じコンポーネントで2つの異なる配列をマッピングしてレンダリングする-React

Reactの学習を始めたばかりですが、同じコンポーネントで2つの異なる配列をマッピングおよびレンダリングする方法を理解するのに問題があります。私のCMSには、タイトルと説明をそれぞれ含む3つのエントリがあります。私はそれらをGraphQLからvarで呼び出していますdata。コンポーネントにSectionLeftは、threeFeaturesclassNameとしてのグリッドコンテナがあります。私のホームページでは、小道具を使ってコンテンツをグリッドコンテナに渡していますbottomcontent。SingleFeatureグリッド列であり、アイコン、タイトル、説明を含む配列でコンポーネントを渡します。これは3回繰り返され、3列x1行のグリッドを構成します。コンポーネントにSingleFeatureはchildren、定数の配列マップを含む必要がある小道具がありますiconList3つの異なるsvgアイコンコンポーネントが含まれています。以下に表示されてSingleFeatureいるのと同じdata配列を小道具featureとdetailsに表示するコンポーネントの複数配列マップを作成する方法を理解できませんが、3つのコンポーネントをchildren配列内にレンダリングします。どんな説明でも大歓迎です。ありがとうございました。

ホームページ.js

import IconOne from "../components/icons/icon-one"

import IconTwo from "../components/icons/icon-two"

import IconThree from "../components/icons/icon-three"

export const iconList = [IconOne, IconTwo, IconThree]

export default function Home({data}) {

  return (
    <div>
      <SectionLeft bottomcontent =

      {data.allContentfulHomepageWordpressFeatures.edges.map(edge => (

          <SingleFeature
          
          children = {
            ...iconList array...
          }
          feature = {
            edge.node.feature
          }
          details = {
            edge.node.description
          }
          />

        ))
      }
     />
   );
}

section-left.js

export default function SectionLeft(props) {

    return (
                <div className="threeFeatures">{props.bottomcontent}</div>

    );
}

single-feature.js

export default function SingleFeature(props) {
    return(
        <div>
        {props.children}
        <h3>{props.feature}</h3>
        <p>{props.details}</p>
        </div>
    );
}

GraphQLクエリ

export const query = graphql`

  allContentfulHomepageSpeedFeatures {
    edges {
      node {
        feature
        description
      }
    }
  }

}

`