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

Start by reproducing the issue with the provided Tabs, TabList, Tab, and TabPanel example, where the tab data is populated in componentDidMount(). Trace how defaultIndex={0} is applied after the tabs re-render. Done means the first tab is visibly open when the dynamic array is loaded, without requiring a click.