react-router-config:如何仅使用{renderRoutes} onClick呈现孙子路由

import { renderRoutes } from 'react-router-config';
import { useHistory } from 'react-router-dom';

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: '/parent/child',
        component: ChildComponent,
        children: [
          {
            path: '/parent/child/grandchild',
            component: GrandchildComponent
          }
        ]
      }
    ]
  }
];

const ParentComponent = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push('/parent/child/grandchild');
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <button onClick={handleClick}>Go to Grandchild</button>
      {renderRoutes(routes)}
    </div>
  );
};

const ChildComponent = () => {
  return (
    <div>
      <h2>Child Component</h2>
      {renderRoutes(routes)}
    </div>
  );
};

const GrandchildComponent = () => {
  return (
    <div>
      <h3>Grandchild Component</h3>
    </div>
  );
};

const App = () => {
  return (
    <BrowserRouter>
      {renderRoutes(routes)}
    </BrowserRouter>
  );
};

export default App;