Dynamic routing React from, custom render router

Question

I can't find the solution to this. Right now I am getting the user profile in this url: https://localhost:3000/profile/user and I want to get the user profile in this url: https://localhost:3000/user but it messes with the other pages routes My code is like this bellow:

App.js - Routes

           <Routes>
            <Route exact path="/login" element={<Login />} />
            <Route exact path="/register" element={<Register />} />
            <Route exact path="/" element={<Home />} />
            <Route path="" element={<PrivateRouter />}>
             
             // It works - it renders the pages under /:page and the profile under /:page/:id
              <Route path="/:page" element={<PageRender />} />
              <Route path="/:page/:id" element={<PageRender />} />
              
              // I want to make it like this but it doen't work at all
              <Route path="/:id" element={<PageRender />} /> // Messes with other pages
            </Route>
          </Routes>

PageRender.js

const GeneratePage = (pageName) => {
  const component = () => require(`../pages/${pageName}`).default;

  try {
    return React.createElement(component());
  } catch (err) {
    return <NotFound />;
  }
};

const PageRender = () => {
  const { page, id, username } = useParams();
  const { auth } = useSelector((state) => state);

  let pageName = "";

  if (auth.token) {
    if (id) {
      pageName = `${page}/[id]`;
    } else {
      pageName = `${page}`;
    }
  }

  return GeneratePage(pageName);
};

export default PageRender;