Пользовательский стиль вкладок React

Я использую готовый компонент вкладок из https://github.com/reactjs/react-tabs. Он работает нормально, но я немного застрял с настройкой стилей. У меня нет опыта работы с React, поэтому я немного растерялся и не знаю, с чего начать, потому что стили теперь разрешаются путем добавления классов, соответствующих элементам компонента (см. код ниже).

Это то, чего я хочу добиться: выбранная вкладка меняет цвет

Вот что у меня получилось: все вкладки серые

т.е. мне нужно, когда я нажимаю вкладку 1, она становится белой, а если я нажимаю вкладку 2, вкладка 1 становится серой, а вкладка 1 становится белой.

Я смог установить выбранную по умолчанию вкладку с помощью события onChange (теперь это вкладка 2), я стилизовал react-tabs__tab--selected в файле css, но мне почему-то не хватает связи, мои вкладки все время серые.

const [tabIndex, setTabIndex] = useState(1);

...
return ( ...
<Tabs selectedIndex = {tabIndex} onSelect = {(index) => setTabIndex(index)} id = "controlled-tabs">
    <TabList className = "my-6 flex flex-col sm:flex-row sm:justify-between sm:items-center ">
            <Tab
              key = "tab1"
              
              className = "cursor-pointer py-4 px-8 bg-grey-background border border-grey-intermediate flex flex-grow">
              Tab 1

            <Tab
              key = "tab2"
              
              className = "cursor-pointer py-4 px-8 bg-grey-background border border-grey-intermediate flex flex-grow">
              Tab 2
            </Tab>

            <Tab
              key = "tab3"
            
              className = "cursor-pointer py-4 px-8 bg-grey-background border border-grey-intermediate flex flex-grow">
              Tab 3
            </Tab>
          </TabList>
....
</Tabs>