React: Calling the routes dynamically from a js function

Question

I have 2 web pages (page1.js and page2.js) as part of my react app.

I have made the Page1.js as my default home route and page2.js as my "/page2" route.

import { Navigate, useRoutes } from 'react-router-dom';
//
import Page1 from './pages/page1';
import Page2 from './pages/page2';

export default function Router() {
  const routes = useRoutes([
    {
      path: '/',
      children: [
        { element: <Navigate to="/home" />, index: true },
        { path: 'home', element: <Page1 /> },
        { path: 'page2', element: <Page2 /> },
      ],
    },
    {
      path: '*',
      element: <Navigate to="/" replace />,
    },
  ]);

  return routes;
}

Now I have used the Table component from Material UI and on click of a row in the table, i am calling a javascript function and i can able to get the data from the row in an object.

                  <TableRow
                    hover
                    onClick={(event) => handleClick(event, row)}
                    role="checkbox"
                    aria-checked={isItemSelected}
                    tabIndex={-1}
                    key={row.name}
                    selected={isItemSelected}
                    sx={{ cursor: 'pointer' }}
                  >

  const handleClick = (event, rowObj) => {
    alert(rowObj.calories)
    return(
        <NavLink to="/feedback" >  FAQs </NavLink>
    )
  };

Now i am trying to call the Page2 route from the javascript method with all the objects in the rowObj is the possible ?

Any help is much appreciated.

Thanks,