Error while using useNavigate() or <Navigate />

import { Route, useNavigate } from '@solidjs/router'

import Index from '../pages'

const PrivateRoute = () => {
  const isLoggedIn = !!localStorage.getItem('token')
  const navigate = useNavigate()

  if (!isLoggedIn) {
    navigate('/', { replace: true })
  }

  return <Route path='/' component={Index} />
}

export default PrivateRoute

import { MetaProvider } from '@solidjs/meta'
import { Route, Router } from '@solidjs/router'
import { Component, lazy } from 'solid-js'

import PrivateRoute from './routes'

const Login = lazy(() => import('./pages/Login'))

const App: Component = () => {
  return (
    <MetaProvider>
      <Router>
        <Route children={<PrivateRoute />} />
        <Route path='/login' component={Login} />
      </Router>
    </MetaProvider>
  )
}

export default App