react-bootstrap tabs not showing as pills

Question

I cannot get the active tab titles to display as pills. I have copied the code from https://react-bootstrap.github.io/docs/components/tabs/#controlled.

I added the variant="pills" attribute to the tag in the example, and it works fine.

I am using nextjs, and so "use client" is required at the top of the code. I got the non active tab titles to display using css. When I try to set the background color of the active tab using css, but it only shows the background color while the mouse is down on the tab.

All my other bootstrap and react-bootstrap components are working, What am I missing?

UPDATE: I figured out one of the problems. I was setting the text color in my NavBar menu to white, so that css setting of

.li > .nav-link:not(:active)  {
  color: black;
}

was also effecting my Nav Tabs. So now my css for the form has been updated so only the nav-lick is styled when it is a list item child.

"use client"
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
import './form.css';

export const TestForm = () => {
  return (
    <Tabs
      defaultActiveKey="home"
      transition={false}
      id="noanim-tab-example"
      className="mb-3"      
    >
      <Tab eventKey="home" title="Home">
        Tab content for Home
      </Tab>
      <Tab eventKey="profile" title="Profile">
        Tab content for Profile
      </Tab>
      <Tab eventKey="contact" title="Contact" disabled>
        Tab content for Contact
      </Tab>
    </Tabs>
  );
};

form.css

.li > .nav-link:not(:active)  {
  color: black;
}

navLink.css (for NavBar component)

.mavbar-nav > .nav-link {  
  color: #ffffff;  
}

.mavbar-nav > .nav-link.active {
  color: #0275d8 !important;
  background-color: #ffffff !important;
  border-radius: 5px;
}

#user-dropdown.active {
  color: #0275d8 !important;
  background-color: #ffffff !important;
  border-radius: 5px;
}

.user-nav-item {
  background-color: #0275d8;
  color: #ffffff; 
}

.dropdown-menu {
  background-color: #0275d8;
}

But the problem now is the styles are revered for my NavTabs. The active tab's text is black, and the inactive tab's text is blue like a hyper link. It would be great to get them switched back!