React-router-dom v6 didn't show page when try to route

Question

Hi guys so I'm trying to learn about react-router-dom newest version which is version 6. I tried to create a basic routing in my react-django app, but it didn't work if I create many Routes, for example when i change my route into 8000/product it will show page not found. Can anyone help me with it ?

App.js:

import React from "react";
import HomePage from "./components/HomePage";
import Product from "./components/Product";
import ProductDetail from "./components/ProductDetail"

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Outlet,
} from "react-router-dom";

const App = () => {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<HomePage/>}/>
          <Route path="/product" element={<Product/>}/>
          <Route path="/productdetail" element={<ProductDetail/>}/>
        </Routes>
      </Router>
      
      <Outlet/>
    </>
  )
}

export default App