React Bootstrap Navbar Collapse Not Showing the Links On Default

So I'm trying to use react bootstrap by copy pasting the exact code from the website, however even on default where the screen width is more than 992px (I'm using expand lg) the links just doesn't show. And when the screen is less than 992px, the menu shows and the links shows for a second then just disappear. I have make sure to import bootstrap to main.jsx, but it just doesn't show. This is just weird because default the text just doesn't show but I tried using inspect and it is there, but I just can see it, like it's not displaying?? How do I get it to show? I'm new to using react bootstrap.

NavbarCode

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';

function BasicExample() {
  return (
    <Navbar expand="lg" className="bg-body-tertiary">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default BasicExample;

Main.jsx

import { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import './index.css'
import App from './App.jsx'
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

React Bootstrap's default text colors are relying on Bootstrap's theme variables. .bg-body-tertiary bg are too light for the text color

You can replace className="bg-body-tertiary" with bg="light" and data-bs-theme="light" so bootstrap applies dark text

<Navbar expand="lg" bg="light" data-bs-theme="light">

If you want dark background + light text, use bg="dark" and data-bs-theme="dark"

If you must keep .bg-body-tertiary you can force the text color manually in your CSS like this

.navbar-nav .nav-link {
  color: black !important;
}

if all these it still invisible, in your index.css maybe are overriding bootstrap color