React 17 & React Router Dom v6 Example

Questions
1

I am trying to setup Okta Integration for a brand new application that we are developing. I have looked through the forums and documentation but it seems to be old.

The new application uses React 17.x and React Router Dom v6

const App = () => (
  <Router>
    <Security oktaAuth={OktaConfiguration} restoreOriginalUri={restoreOriginalUri}>
      <ThemeProvider>
        <NavBar />
        <Routes>
          <Route path="/" element={<Search />} />
          <Route path="/upload" element={<Upload />} />
         <Route path="/callback" element={LoginCallback} />
        </Routes>
      </ThemeProvider>
    </Security>
    <div className="h-12" />
    <Footer />
  </Router>
)

ReactDOM.render(
  <div id="new-app">
    <React.StrictMode>
      <App />
    </React.StrictMode>
    <App />
  </div>,
  document.getElementById('root'),
)

I have setup a new file OktaConfiguration.ts - but I cannot use useNavigate outside of a component.

import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
import { useNavigate } from 'react-router-dom';

const OktaConfiguration = new OktaAuth({
  clientId: '0oafsu8i6zdlN93us357',
  issuer: 'https://midamericamortgage.okta.com',
  redirectUri: `${window.location.origin}/login/callback`,
})

export const restoreOriginalUri = async (_oktaAuth: any, originalUri: any) => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const navigate = useNavigate()
  navigate(toRelativeUrl(originalUri || '/', window.location.origin))
}

export default OktaConfiguration

Any suggestions or examples to follow. I am using functional components with TypeScript so that always leads me down a path that not many people take. Thanks