Css – React Tabs rendering tab content vertically below one another across Tabs

I am trying to render Tabs using react-tabs. The tab contents are rendered one below another (across different tabs) as follows

Adding my code Snippet

<Tabs className="tabs">
    <TabList className="tab-header-list">
        <Tab selectedClassName="tab-header-list-items"><b>A</b></Tab>
        <Tab selectedClassName="tab-header-list-items"><b>B</b></Tab>
        <Tab selectedClassName="tab-header-list-items"><b>C</b></Tab>
        <Tab selectedClassName="tab-header-list-items"><b>D</b></Tab>
    </TabList>
    <TabPanel key="1" className="tab-panel">
        <BarChart chartData={userData} />
    </TabPanel>
    <TabPanel key="3" className="tab-panel">
         <BarChart chartData={userData} />
    </TabPanel>
    <TabPanel key="2" className="tab-panel">
         <BarChart chartData={userData} />
    </TabPanel>
</Tabs>

CSS used

.tabs {
    
}

.tab-header-list{
    color: grey;
}

.tab-header-list-items {
    display: inline-block;
    background-color: black;
    width: 25%;
    color: black;
}

.tab-panel {
    width: 900px;
    height: 300px;
}

Actual Rendering
Expected

Tried all values for flex property, display property, but nothing seems to work.
Please suggest.