I am new to react. I was using react-router-dom library to define routes for my program it is working for all the pages except for product page and in Route.js i don’t understand why?

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

//App.js

import { createBrowserRouter,RouterProvider} from "react-router-dom";
import HomePage from "./Pages/home";
import Contact from './Pages/contact';
import AboutPage from "./Pages/About";
import RootLayout from "./Pages/Root";
import ErrorPage from "./Pages/error";
import ProductPage from "./Pages/Product";
import ProductDetails from "./Pages/ProductDetails";

const router = createBrowserRouter([
  {
      path: '/',
      elements: <RootLayout />,
      errorElement: <ErrorPage />,
      children: [
        {path:'/', element:<HomePage />},
          { path: 'contact', element: <Contact /> },
          { path: 'about', element: <AboutPage /> },
          { path: 'product', elements: <ProductPage /> },
          { path: 'product/:productId', element: <ProductDetails /> },
      ],
  },
]);

function App() {
  return (
  <RouterProvider router={router} />
  );
}

export default App;

//product.js
import {Link} from 'react-router-dom'


const ProductPage=()=>{
  const PRODUCTS=[
    {productId:'p1', title:'Product 1'},
    {productId:'p2', title:'Product 2'},
    {productId:'p3', title:'Product 3'},
    {productId:'p4', title:'Product 4'},
    {productId:'p5', title:'Product 5'},
]
    return (
    <>
    <h1>Products Page</h1>
    <ul>
      {PRODUCTS.map((prod)=>(
        <l1 key={prod.productId}>
            <Link to={`/product/${prod.productId}`}>{prod.title}</Link>
        </l1>
      ))}
    </ul>
    </>
    );
}
export default ProductPage;

//Route.js
import {Outlet} from "react-router-dom";
import Navigation from "../components/navigation";

const RootLayout=()=>{
    return (
        <>
       <Navigation />
       <Outlet />
       </>
    )
}
export default RootLayout;

was not working was supposed to appear on top of all pages but it was not working at all please help me.
whenever i visit http://localhost:3000/product page it shows me

”Matched leaf route at location “/product” does not have an element or Component. This means it will render an with a null value by default resulting in an “empty” page”

this error