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

Commencez par reproduire le problème avec l’exemple fourni de Tabs, TabList, Tab et TabPanel, dans lequel les données des onglets sont chargées dans componentDidMount(). Suivez la manière dont defaultIndex={0} est appliqué après le nouveau rendu des onglets. La tâche est terminée lorsque le premier onglet est visiblement ouvert au chargement du tableau dynamique, sans nécessiter de clic.