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>`

Inizia riproducendo il problema con l’esempio fornito di Tabs, TabList, Tab e TabPanel, in cui i dati delle schede vengono popolati in componentDidMount(). Traccia come viene applicato defaultIndex={0} dopo il nuovo rendering delle schede. Il lavoro è completato quando la prima scheda è visibilmente aperta al caricamento dell’array dinamico, senza richiedere un clic.