Selected Tab is not highlighted in the Navbar in reactjs bootstrap?

Question

I am able to simply highlight the tab selected from the NavBar. I had used the Navbar Component of React-bootstrap and used the state to change the bgColor and textColor of the selected tab. But instead of the selected tab, it is highlighting all the tabs? Any corrections?

What I want is to highlight the clicked tab only? It should remain highlighted all the time when we are on that page (like tab component or nav-pills).

import React, { useState } from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { LogOut } from './LogOut';

const NavbarComponent = () => {
  const [bgcolor, setBgcolor] = useState('black');
  const [textcolor, setTextcolor] = useState('white');

  function handleHighlightTab() {
    setBgcolor('white');
    setTextcolor('black');
  }

  return (
    <>
      <Navbar bg="dark" variant="dark" fixed="top" className="nav-pills">
        <Container>
          <Navbar.Brand href="/">Verticals</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link
              href="/grocery"
              onSelect={handleHighlightTab}
              style={{ backgroundColor: bgcolor, color: textcolor }}
            >
              Grocery
            </Nav.Link>
            <Nav.Link
              href="/fashion"
              onSelect={handleHighlightTab}
              style={{ backgroundColor: bgcolor, color: textcolor }}
            >
              Fashion
            </Nav.Link>
            <Nav.Link
              href="/footwear"
              onSelect={handleHighlightTab}
              style={{ backgroundColor: bgcolor, color: textcolor }}
            >
              Footwear
            </Nav.Link>
          </Nav>
        </Container>
      </Navbar>;
    </>
  );
};

export default NavbarComponent;

Answer 1

Try this command in CSS file for me it worked out

.nav-pills .nav-link.active