Tabs: How to combine custom tab with Data Tabs?

[Zaynex]

Hi, I really like data tabs -> https://chakra-ui.com/tabs#data-tabs.

And I also want use customTab -> https://chakra-ui.com/tabs#creating-custom-tab-components.

But If I use data tab, I can't get isSelected props.
How can I do?

function Demo() {

const SustomTab = React.forwardRef((props, ref) => {
   //  sad. I can't get isSelected here.

    return (<Tab ref={ref} isSelected={props.isSelected} {...props}>
      {props.isSelected ? <Image src={props.selectedSrc} /> : <Image src={props.src}/>}
    </Tab>)
  })
  return  <Tabs variant="soft-rounded">
          <TabList>
            {InitMap.map((src, index) => <SustomTab src={src} selectedSrc={SelectedMap[index]}></SustomTab>)}
          </TabList>
          <TabPanels>
            <TabPanel>
              <p>one!</p>
            </TabPanel>
            <TabPanel>
              <p>two!</p>
            </TabPanel>
            <TabPanel>
              <p>three!</p>
            </TabPanel>
          </TabPanels>
        </Tabs>
}

Thanks.

[with-heart]

Hi @Zaynex! Could you create a CodeSandbox reproduction of your issue? I'm able to access props.isSelected where your comment is. https://codesandbox.io/s/quiet-mountain-929le?file=/src/App.js

[Zaynex]

I catch it. I'm using

"@chakra-ui/core": "^1.0.0-rc.3",

When I replace chakra-ui/core version with it, I find the bug.

https://codesandbox.io/s/boring-leftpad-y3c36?file=/src/App.js

[Zaynex]

I find why it won't work.
https://codesandbox.io/s/fervent-pare-mzhq8?file=/src/App.js

<Tabs variant="soft-rounded">
      <TabList>
        <div> //  -> this block the props
          {[1, 2, 3].map((index) => (
            <SustomTab src={"1"}>{index}</SustomTab>
          ))}
        </div>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>one!</p>
        </TabPanel>
        <TabPanel>
          <p>two!</p>
        </TabPanel>
        <TabPanel>
          <p>three!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>