Server-side rendering a react app with react bootstrap not working

Question

I am new to ssr and I'm trying to server-side render my react app using renderToString() but since I am using react bootstrap the app always crash when trying to render it. Whereas if if I remove all components from the component and replace them with a simple div <div>Hello World!</div> the ssr works perfectly, please I'll be more than thankful if anyone can help, I've been in this for more than 2 weeks. Thank you. Below is my code and the error code:

App.jsx:

import React from "react";
import Navigation from "./components/Navigation";
export default function App(props) {

  return (
    <div>
      <Navigation />
    </div>
    //I deleted the routes for a simpler to read code, since with or without routes I get the same 
      error//
  );
}

Navigation.js:

import React from "react";
import { Nav, Navbar, Container } from "react-bootstrap";
import { Link } from "react-router-dom";
export default function Navigation() {
  return (
    <div>
      <Navbar
        collapseOnSelect
        fixed="top"
        className="topNavbar"
        expand="md"
        bg="dark"
        variant="dark"
      >
        <Container>
          <div className="logo">
            <Nav.Link className="SCMP1" eventKey="0" as={Link} to="/">
              test
            </Nav.Link>
          </div>

          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto"></Nav>
            <Nav>        
              <Nav.Link className={"navlink"} eventKey="1" as={Link} to="/">
                Home
              </Nav.Link>

              <Nav.Link
                className={"navlink"}
                eventKey="2"
                as={Link}
                to="/Departments"
              >
                Departments
              </Nav.Link>
              <Nav.Link
                className={"navlink"}
                eventKey="3"
                as={Link}
                to="/Events"
              >
                Events
              </Nav.Link>
              <Nav.Link className={"navlink"} eventKey="4" as={Link} to="/Auth">
                LogIn
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </div>
  );
}

Express SSR Code:

app.get("/",(req,res,next)=>{
  const app = ReactDOMServer.renderToString(<App />);
const index= path.resolve('../client/build/index.html')
console.log(index)
fs.readFile(index, 'utf8', (err, data) => {
  if (err) {
    console.error('Something went wrong:', err);
    return res.status(500).send('Oops, better luck next time!');
  }

  return res.send(
    data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
  );
});
});

Error Code:

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 (G:\website2-1\SCMP WebDev\client\node_modules\react\cjs\react.development.js:1476:13)
    at useRef (G:\website2-1\SCMP WebDev\client\node_modules\react\cjs\react.development.js:1515:20)
    at useUncontrolledProp (G:\website2-1\SCMP WebDev\client\node_modules\uncontrollable\lib\cjs\hook.js:24:38)
    at G:\website2-1\SCMP WebDev\client\node_modules\uncontrollable\lib\cjs\hook.js:63:32
    at Array.reduce (<anonymous>)
    at useUncontrolled (G:\website2-1\SCMP WebDev\client\node_modules\uncontrollable\lib\cjs\hook.js:53:30)
    at Object.render (G:\website2-1\SCMP WebDev\client\node_modules\react-bootstrap\cjs\Navbar.js:60:43)
    at ReactDOMServerRenderer.render (G:\website2-1\SCMP WebDev\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3872:44)
    at ReactDOMServerRenderer.read (G:\website2-1\SCMP WebDev\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at Object.renderToString (G:\website2-1\SCMP WebDev\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)

Thank You For Helping