Javascript – Additional route causes Home route to stop working

I am trying to use React Router Dom and It happens that whenever I try to add a second route, it causes the first route '/' to stop working but just by removing the route it suddenly works. I tried having multiple routes but it still won’t work.

How can I add more routes ?

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";

import "./App.css";
import Navbar from "./components/Navbar";
import AddProduct from "./pages/AddProduct";


function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/add-product" element={<AddProduct />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

My navbar looks like this

import React from "react";
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav className="bg-gray-800 p-4 flex items-center justify-around ">
      <ul className="flex space-x-4 text-white">
        <li>
          <Link to="/" className="hover:text-gray-300">
            Home
          </Link>
        </li>
        <li>
          <Link to="/add-product" className="hover:text-gray-300">
            Add Product
          </Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;