React 6.4.2 How to add Nav component for all pages

Question

I am trying add components to all pages with react-router-dom version 6.4.2. It appears only component for all pages. Other elements are not showing. How can I add Nav to related element Thnx.

        import {createBrowserRouter, RouterProvider, Route, Link,} from 'react-router-dom';

        const Nav = () => (
            <nav>
                <Link to='/'>Home</Link> | 
                <Link to='/contact'>Contact</Link> | 
                <Link to='/products'>Products</Link> | 
            </nav>
        );

        const HomePage = () => (
            <>
                <div>Home Page</div> 
            </>
            
        );

        const ContactPage = () => (
            <>
                <div>Contact Page</div>
            </>
        );




        const routes = createBrowserRouter([
            { 
                element: <Nav />,
                children: [
                    {   path: "/",                
                        element: <HomePage />                    
                    },
                    {
                        path: "/contact",
                        element: <ContactPage />
                    }
                ]
        }

        ]);

        const container = document.getElementById('root');
        const root = ReactDOM.createRoot(container);
        root.render(<RouterProvider router={routes} />);