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

Comienza reproduciendo el problema con el ejemplo proporcionado de Tabs, TabList, Tab y TabPanel, donde los datos de las pestañas se cargan en componentDidMount(). Rastrea cómo se aplica defaultIndex={0} después de que las pestañas se vuelven a renderizar. La tarea estará completada cuando la primera pestaña esté visiblemente abierta al cargar el array dinámico, sin requerir un clic.