Got undefined param value in a generated element in antd Tabs -> TabPane

I would like to create a customized TabPane for an Antd tab,
The Tabs definition:

      <Tabs>
        {myTab.map((tab) => (
          <TabPane tab={tab.label} key={tab.label}>
            {tab.children}
          </TabPane>
        ))}
      </Tabs>

The myTab definition:

  const myTab = Object.keys(target.data).map((targetKey) => {
    let hierarchy = [];
    hierarchy = target.hierarchy.filter((i) => i.key === targetKey)[0].children;
    let modeInfo =  {};
    modeInfo = target.data[targetKey];
    return {
      label: targetKey,
      key: targetKey,
      children: (
        <>
          <InfoPage modeInfo={modeInfo} hierarchy={hierarchy} selectedTarget={targetKey}/>
        </>
      ),
    };
  });

The data structure of target looks something like this:

{
   data: {
      XXXXX : {....}
   }
   hierarchy : [ 
      {
         children: [...]
         key: 'XXXXX'
      }
   ]
}

I can get the data of ‘modeInfo’ & ‘hierarchy’ at the root level when initialize the InfoPage element, how ever I keep getting ‘undefined’ for all the input params within InfoPage.