A is only ever to be used as the child of element, never rendered directly after migration to latest dependencies

Question

I want to migrate old React project to latest dependencies but I get this issue:

Old code:

const NonPrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    getCurrentUser() ? (
      <Redirect to={{
        pathname: "/auth",
        state: { from: props.location }
      }} />
    ) : (
        <Component {...props} />
      )
  )} />
)

New:

const NonPrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    getCurrentUser() ? (
      <Navigate to={{
        pathname: "/auth",
        state: { from: props.location }
      }} />
    ) : (
        <Component {...props} />
      )
  )} />
)

But I get error: Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

Full code: https://github.com/rcbandit111/spring_security_6_gateway_hardening/blob/main/keycloak-oidc-reactjs-client/src/App.js

Do you know how I can fix this issue?