I want to try to create a product detail page that will display the product details.

However, there is an error in my code. Can you help me?

This is my App.tsx code

import About from "./pages/About";
import Home from "./pages/Home";
import { Routes, Route } from "react-router";
import Products from "./pages/Products";
import Contact from "./pages/Contact";
import Navbar from "./components/Navbar";
import NotFound from "./pages/NotFound";
import MainLayout from "./layouts/MainLayout";
import ProductDetail from "./pages/ProductDetail";

function App() {
  return (
    

      
        }>
          } />
          } />
          } />
          } />
          } />
        

        } />
      
    
  );
}

export default App;

This is my Products.tsx code

import { Link } from "react-router";

const products = [
  { id: 1, name: "Kalimantan", price: 15000000 },
  { id: 2, name: "Sulawesi", price: 20000000 },
  { id: 3, name: "Sumatera", price: 35000000 },
];

function Products() {
  return (
    

      
Product Kami
      

        {products.map((product) => (
          
            
{product.name}
          
        ))}
      
    
  );
}

export default Products;

And this is my ProductDetail.tsx code

import { useParams } from "react-router";

function ProductDetail() {
  const { id } = useParams();

  const product = products.find((product) => product.id === Number(id));

  return (
    

      
{product.name}
      
Harga: {product.price}
    
  );
}

export default ProductDetail;