I'm using Reactjs and I'm trying to use "Dynamic Routing" now, but the page appears blank. This is my routing file:

export default function Router() { return useRoutes([ { path: "/", element: , errorElement: , children: [ { element: , index: true }, { element: , index: true }, ], }, ]); } const HomePage = Loadable(lazy(() => import("../pages/HomePage"))); const User = Loadable(lazy(() => import("../pages/User"))); const Page404 = Loadable(lazy(() => import("../pages/Page404")));

I'm trying to access the "User.js" file in (src/pages), this is my User.js file:

import React, { useEffect, useState } from "react"; import { useParams, withRouter } from "react-router"; import axios from "axios"; const User = (props) => { const params = useParams(); const [users, setUsers] = useState({}); useEffect(() => { async function fetchData() { const res = await axios( `https://jsonplaceholder.typicode.com/comments/${params.id}` ); console.log("INDI", res.data); setUsers(res.data); } fetchData(); }, []); return ( <> 
Hello worldddddddd
  ); }; export default User;