Generate new tab after click on table row

Question

I tried to add new tab after click on the table row.

I think I missed Props or State to make it dynamically?

table component:

   <tr {...row.getRowProps()} onClick={ (e) => Test(row.values)} />

second component that listen to click event:

   function Test(data) {
      return (
          <>
            {Object.keys(data).map(key =>
              <Tab key={key}>{key}</Tab>
            )}
          </>
      )
}

3rd component to populate tabs with table:

   const TabTable = () => {
    return (
        <div>
            <Tabs>
                <TabList>
                    <Tab key="Main">Main</Tab>
                    <Test />
                </TabList>
                <TabPanel>
                    <LoadData />
                </TabPanel>
            </Tabs>
        </div>
    );
}

LoadData is a table.

Yes, I use import Test in TabTable and LoadTable components, it's just snippets.

I did not use Props or State. Using default export.

Is that probably why it's not being dynamically without Props or State?