Change the :active background-colour of the React-Bootstrap tabs - css

Question

I am new to bootstrap but I am a bit fluent in React. I just want to ask how to change the :active background colour of the react-bootstrap tabs.
Here is the link:- https://react-bootstrap.github.io/components/tabs/ (It is the vertical tab menu)
I have used the code shown there.
<Tab.Container id="sidebar" defaultActiveKey="first">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="first" className="tab">Tab 1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second" className="tab">Tab 2</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="third" className="tab">Tab 3</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={9}>
<Tab.Content>
<Tab.Pane eventKey="first">
<h1>One</h1>
</Tab.Pane>
<Tab.Pane eventKey="second">
<h1>Two</h1>
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
How can I change the background of the active tabs using CSS or bootstrap?
Please help.
Thank you.

Answer 1

as #Tim suggested its also 100% correct when you choose variant="pills" but default is variant="tabs"
For Tabs
.nav.nav-pills .nav-link.active {
background-color: <YOUR_COLOR>
}
For Pills
.nav.nav-tabs .nav-link.active {
background-color: <YOUR_COLOR>
}