React 17 & React Router Dom v6 Example

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 = () => (
    <Security oktaAuth={OktaConfiguration} restoreOriginalUri={restoreOriginalUri}>
        <NavBar />
          <Route path="/" element={<Search />} />
          <Route path="/upload" element={<Upload />} />
         <Route path="/callback" element={LoginCallback} />
    <div className="h-12" />
    <Footer />

  <div id="new-app">
      <App />
    <App />

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: '',
  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