Не работают Route

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

  <Container>
        <SideBar />
      </Container>
      <Switch>
        <Route exact path={"/"} component={Main} />
        <Route path={"/user"} component={User} />
      </Switch>

  <Link className="sidebar__link" to="/user">
              <AiOutlineUser className="sidebar__icon" />
              <span className="sidebar__link-name">Пользователь</span>
            </Link>

import React from "react";
const User = () => {
  return <h1 style={{ fontSize: "200px" }}>User</h1>;
};
 
export default User;

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
 
import App from "./App";
 
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
 
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import App from "./App";
import Expenses from "./routes/expenses";
import Invoices from "./routes/invoices";
 
const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>,
  rootElement
);

export default function Expenses() {
  return (
    <main style={{ padding: "1rem 0" }}>
      <h2>Expenses</h2>
    </main>
  );
}

export default function Invoices() {
  return (
    <main style={{ padding: "1rem 0" }}>
      <h2>Invoices</h2>
    </main>
  );
}

import { Link } from "react-router-dom";
 
export default function App() {
  return (
    <div>
      <h1>Bookkeeper</h1>
      <nav
        style={{
          borderBottom: "solid 1px",
          paddingBottom: "1rem",
        }}
      >
        <Link to="/invoices">Invoices</Link> |{" "}
        <Link to="/expenses">Expenses</Link>
      </nav>
    </div>
  );
}

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import App from "./app";
import Expenses from "./routes/expenses";
import Invoices from "./routes/invoices";
 
const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <App />
    <Routes>
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>,
  rootElement
);