Nav links work but manually typing url does not work

I have a react/grqphql app and on the local host it works find but on heroku, if I login in or create a user it reloads the home page and in the menu I see the first name of the logged in user. If I click that link it takes me to the profile page, but if I am logged in and manually enter domain/profile I get a error saying cannot get /profile.

Even on the other links in the nav bar. The Events page, for example does not exist yet but if I click on Events in the navbar it will load a blank page with just the header and footer, but if I enter /events after the domain I get a page with nothing but Cannot GET /events.

Here is my index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Here is my App.js:

import { Route, Routes, BrowserRouter as Router } from 'react-router-dom';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  createHttpLink,
} from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import Container from 'react-bootstrap/Container';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './pages/Home';
import Profile from './pages/Profile';

//Construct our main GraphQL API endpoint
const httpLink = createHttpLink({
  uri: '/graphql',
});

// Construct request middleware that will attach the JWT token to every request as an `authorization` header
const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem('token');
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `${token}` : '',
    },
  };
});

const client = new ApolloClient({
  // Set up our client to execute the `authLink` middleware prior to making the request to our GraphQL API
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

function App() {
  return (
    <ApolloProvider client={client}>
      <Container>
        <Router>
          <Header />
          <Routes>
            <Route exact path='/' element={<Home />}>
              Home
            </Route>
            <Route exact path='/profile' element={<Profile />}>
              Profile
            </Route>
          </Routes>
          <Footer />
        </Router>
      </Container>
    </ApolloProvider>
  );
}

export default App;

I tried doing the Rouotes i a single line:

<Route exact path='/' element={<Home />} />

But neither way has had any effect.

In case you need to see it, here is the navbar code:

<>
      <Navbar expand='md' id='main-nav'>
        <Container>
          <Navbar.Brand as={Link} to='/'>
            <img src={logo} alt='TMH Logo' />
          </Navbar.Brand>
          <Navbar.Toggle
            aria-controls='basic-navbar-nav'
            className='custom-toggler'
          />
          <Navbar.Collapse id='basic-navbar-nav'>
            <Nav className='ps-4'>
              <Nav.Item>
                <Nav.Link as={NavLink} to='/'>
                  Home
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link as={NavLink} to='/events'>
                  Events
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link as={NavLink} to='/features'>
                  Features
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link as={NavLink} to='/clubs'>
                  Clubs
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link as={NavLink} to='/pricing'>
                  Pricing
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link as={NavLink} to='/about'>
                  Aboout
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link as={NavLink} to='/contact'>
                  Contact
                </Nav.Link>
              </Nav.Item>

              {token ? (
                <>
                  <Nav.Item>
                    <Nav.Link as={NavLink} to='/profile'>
                      {me.firstName}
                    </Nav.Link>
                  </Nav.Item>
                  <Nav.Item>
                    <Nav.Link onClick={handleLogout}>Logout</Nav.Link>
                  </Nav.Item>
                </>
              ) : (
                <Nav.Item>
                  <Nav.Link onClick={handleShow}>Signup/Login</Nav.Link>
                </Nav.Item>
              )}
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
   </>