【Polaris】Resource Itemをクリックした時にChildrenに指定したコンポーネントに引数を渡せない

[EngeneerGrotle]

Polarisの公式サイトにあるようなResouce List内のResource Itemをクリックすると詳細情報を出すような画面を作りたいと思っています。

しかし以下のようにChildrenに詳細画面のコンポーネントを入れて引数を渡しても、受け取り先ではUndefinedになってしまいます。

function ResourceListExample() {
  return (
    <Card>
      <ResourceList
        items={[
          {
            id: 100,
            url: 'customers/341',
            name: 'Mae Jemison',
            location: 'Decatur, USA',
          }, ... ...
        ]}
        renderItem={(item) => {
          const {id, url, name, location} = item;
          const detail = <DetailPage detail={item} /> // <- 詳細画面を定義
          return (
            <ResourceItem
              id={id}
              url={url}
              children={detail} // <- 詳細画面をchildrenに渡す
            >
      （中略）
      />
    </Card>
  );
}

上記のような引数の受け渡しはReactと変わらないと想定していたのですが、適切な方法や何か別の方法があれば教えてください。

[Anonymous_44fbe07fc59d9ccaacd70575fd5a5155]

EngeneerGrotle 様

はじめまして、フルバランスの道家と申します。

ご質問確認いたしました。

パッと見の印象ですが、コンポーネントのchildrenの渡し方は、

ではなく、

ではないでしょうか。

なにかヒントになれば幸いです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

フルバランス 道家