React-Bootstrap Navbar is Breakaing My Website

i am trying to pull a bootstrap Navbar from the documentation here however when I follow the steps of setting it up, (using the npm install, updating the index.html, and updating the index.JS to import the CSS) I try to test it but it doesn't show anything.

I cant find react-bootstrap in my package.json file but I have the latest version downloaded (npm install react-bootstrap bootstrap@5.1.3).

I'm still new to React so I'm not sure what else to check.

Here is the code for the NavbarComp.js

import React from "react";
import { Navbar, Nav, Container } from "react-bootstrap";

function NavbarComp() {
    return(
        <div>
        <Navbar bg="dark" variant="dark">
    <Container>
    <Navbar.Brand href="#home">Navbar</Navbar.Brand>
    <Nav className="me-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
    </Nav>
    </Container>
  </Navbar>
  <br />
  <Navbar bg="primary" variant="dark">
    <Container>
    <Navbar.Brand href="#home">Navbar</Navbar.Brand>
    <Nav className="me-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
    </Nav>
    </Container>
  </Navbar>

  <br />
  <Navbar bg="light" variant="light">
    <Container>
    <Navbar.Brand href="#home">Navbar</Navbar.Brand>
    <Nav className="me-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
    </Nav>
    </Container>
  </Navbar>
        </div>
    )
}

export default NavbarComp;

here is the Index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
  
//Whenever we call "root", we are saying to update the Dom in all my pages. 
ReactDOM.render(<App />, document.getElementById('root'));

Everything goes into my MainComp.js

import react from "react";
import Home from "./HomeComp";
import NavbarComp from "./NavbarComp";
import RecentWork from "./RecentWorkComp";

function Main() {
    return (
        <div style={{
            backgroundColor: '#FFFAF3',
            width: '100vw',
            height: '100%'
          }}>
            <NavbarComp />
            <Home />
            <br />
            <RecentWork />
        </div>
    )
}
export default Main;

here is my package.json

{
  "name": "portfolio-website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Here is my GitHub (though I'm not sure if uploaded it correctly, it was acting funny) https://github.com/Shaneeyb/Portfolio-Website

here is a screenshot of what it looks like: Screenshot

The error it's giving me is:

react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476:1)
    at useRef (react.development.js:1515:1)
    at useUncontrolledProp (hook.js:12:1)
    at hook.js:52:1
    at Array.reduce (<anonymous>)
    at useUncontrolled (hook.js:42:1)
    at Navbar.js:23:1
    at renderWithHooks (react-dom.development.js:14985:1)
    at updateForwardRef (react-dom.development.js:17044:1)
    at beginWork (react-dom.development.js:19098:1)
resolveDispatcher @ react.development.js:1476
useRef @ react.development.js:1515
useUncontrolledProp @ hook.js:12
(anonymous) @ hook.js:52
useUncontrolled @ hook.js:42
(anonymous) @ Navbar.js:23
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
3react-dom.development.js:20085 The above error occurred in the <Navbar> component:

    at http://localhost:3001/static/js/bundle.js:46398:70
    at div
    at NavbarComp
    at div
    at Main
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.