Продукция не определена ⇐ Javascript

[Anonymous]

Я хочу попытаться создать страницу сведений о продукте, на которой будет отображаться подробная информация о продукте.
Однако в моем коде есть ошибка. Можете ли вы мне помочь?
Это мой код App.tsx
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;

Это мой код Products.tsx
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;

А это мой код ProductDetail.tsx
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;


Подробнее здесь: https://stackoverflow.com/questions/798 ... ot-defined