Dynamic Update of tabs doesn't open a tab by default

So I have a React Component with a tablist. If I make it Tab 1 and Tab 2 with Tabpanel 1 and 2 everything works fine.
However, if I have an array called 'Types' that gets filled in the componentDidMount(), it re-renders my Tabs, but in my browser, none of the tabs is opened. Meaning, I have to click one in order to open it. adding defaultIndex={0} didn't help.

This is what I render;

`

    <TabList>
      {types.map(type => <Tab><div className={styles.tab}>{type.value}</div></Tab>)}
    </TabList>

    {types.map(type =>
      <TabPanel>
        { <p>{type.value}</p> }
      </TabPanel>
    )}

  </Tabs>`

Beginne damit, das Problem mit dem bereitgestellten Beispiel für Tabs, TabList, Tab und TabPanel zu reproduzieren, bei dem die Tab-Daten in componentDidMount() geladen werden. Verfolge, wie defaultIndex={0} angewendet wird, nachdem die Tabs erneut gerendert wurden. Die Aufgabe ist erfüllt, wenn der erste Tab sichtbar geöffnet ist, sobald das dynamische Array geladen wurde, ohne dass ein Klick erforderlich ist.