When I set everything up, I can see that it changes the path without any issue but it doesn’t render anything no matter how I change or refactor the code.

Navbar.tsx:

import { Menu } from "semantic-ui-react";
import { Link } from "react-router-dom";

export const Navbar = () => {
  return (
    <>
      <Menu fixed="top" size="huge">
        <Menu.Item as={Link} to="/" style={{ fontSize: "1.5rem" }}>
          Home
        </Menu.Item>
        <Menu.Item as={Link} to="/rated" style={{ fontSize: "1.5rem" }}>
          Rated
        </Menu.Item>
        <Menu.Menu position="right">
          <Menu.Item as={Link} to="/auth" style={{ fontSize: "1.5rem" }}>
            Auth
          </Menu.Item>
        </Menu.Menu>
      </Menu>
    </>
  );
};

APP.tsx:

import {  Routes, Route, BrowserRouter } from "react-router-dom";
import "./App.css";
import { Navbar } from "./components/navbar";
import  Rated  from "./components/Rated";
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<div>Home asdasda</div>} />
        <Route path="/rated" element={<Rated />} />
        <Route path="/auth" element={<div>Auth page aasda</div>} />
      </Routes>
      <Navbar />
    </BrowserRouter>
  );
}

export default App;