I am new to using React and I am having trouble linking pages with Bootstrap navigation. I am attempting to use React Router DOM to navigate to different pages on click, but the app is not compiling because BrowserRouter is not being imported properly. I copied and pasted the code straight from the website. Can someone please help me identify the mistake and provide guidance on how to fix it?
It shows nothing in the browser except for a blank page. Here is a picture showing some errors in the console: 
app.js
import Home from './Components/Home'
import Contact from './Components/Contact'
import About from './Components/About'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/About" element={<About />}/>
<Route path="/ContactUs" element={<Contact />}/>
</Routes>
</BrowserRouter>
navbar.js
<Navbar expand="lg">
<Container>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<LinkContainer to='/'>
<Nav.Link>HOME</Nav.Link></LinkContainer>
<LinkContainer><Nav.Link to="/About">ABOUT</Nav.Link></LinkContainer>
<LinkContainer><Nav.Link to="/services">SERVICES</Nav.Link></LinkContainer>
<LinkContainer> <Nav.Link to="/">WRITE</Nav.Link></LinkContainer>
</Nav>
<Navbar.Collapse/>
</Container>
</Navbar>