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

まず、componentDidMount() でタブのデータが設定される、提供された Tabs、TabList、Tab、TabPanel の例で問題を再現します。タブが再レンダリングされた後に defaultIndex={0} がどのように適用されるかを追跡します。動的配列が読み込まれたときに、クリックしなくても最初のタブが目に見えて開いていれば完了です。