Estoy tratando de implementar una barra de navegación en React, pero cuando la ejecuto, todos los elementos se muestran uno debajo de otro, y no en una sola línea. Importé react-bootstrap pero parece que no se ve como debería. Soy nuevo en React, tal vez extraño algo.

Aquí está el código:

 import React, { useState, useEffect } from 'react' import UserService from '../services/UserService'; import { useLocation, useSearchParams } from 'react-router-dom'; import { Navbar, Nav, NavDropdown, Button } from 'react-bootstrap' function EmployeeComponent() { const [users, setUsers] = useState([]) useEffect(() => { getEmployees() }, []) const getEmployees = () => { console.log("getEmployee"); UserService.getUsers().then((response) => { setUsers(response.data) console.log(response.data); }); }; const location = useLocation(); const [searchParam] = useSearchParams(); return ( <div className="container"> <Navbar bg="light" expand="lg"> <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> </Navbar>

Cómo se ve en mi pantalla: Cómo debería verse: