I might be doing this completely wrong, but here goes.
I’m using the Tabs from Chakra as part of the navigation on my webapp.
I’m currently manually writing the names on each Tab, and then calling the component. Each return in the individual components is wrapped in a TabPanel.

function TabNav(){
    return(<Tabs variant='soft-rounded' colorScheme='green'>
    <TabList>
      <Tab>Report</Tab>
      <Tab>FoodItems</Tab>
      <Tab>Incident</Tab>
      <Tab>FormSubmit</Tab>
  
    </TabList>
  
    <TabPanels>
      
        <Report/>
        <FoodItems/>
        <Incident/>
        <TabPanel>
        <SubmitReport/>
        </TabPanel>

  </TabPanels>

</Tabs>

This works, but it doesn’t neither scalable, modular and it will be hopeless to keep track off.
Is there a way where I can pass the components as props to the , or is there a different way to go about it? I wanted it to be called once, then rendered both in the Tab and TabPanel With pseudo code something like this

import { foodItems, Report, Incident, SubmitReport } "from file"

<Tabs variant='soft-rounded' colorScheme='green'>
    <TabList>
      <Tab "<Report/>">Report.title</Tab>
      <Tab "<FoodItems/>">FoodItems.title/></Tab>
      <Tab "<Incident/>">Incident.title</Tab>
      <Tab "<SubmitReport/>">SubmitReport.title</Tab>
  
    </TabList>
         
    <TabPanels>
    
        <TabPanel>
            Report.render
        </TabPanel>

        <TabPanel>
            FoodItems.render
        </TabPanel>
            Incident.render        
         <TabPanel>
            SubmitReport.render        
        </TabPanel>

<TabPanel>
        
        </TabPanel>
  </TabPanels>

</Tabs>

Sorry for the lack of formal structure. But I can’t really describe it any better

I really don’t know what to google or try for this one