Okta login redirection does not update authState

Trying to integrate Okta with ReactJs web. Web app successfully route user to Okta login page, user managed to login successful too. Upon login successful, Okta redirected back to ReactJs web without authState update (authState is NULL while trying to read).

With my implemented code, im aways getting redirected back to Home.js with the Loading... text. What seems to be missing here?

Sample code impelmentation as below

App.js

const oktaAuth = new OktaAuth({
    issuer: 'https://{{ourDomain}}.com/oauth2/default',
    clientId: '{{ourValue}}',
    redirectUri: window.location.origin + '/login/callback',
    scopes: ["openid", "profile", "email"],
    pkce: true,
  });

<Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
        <Switch>
          <Route path="/login/callback" component={LoginCallback} />
          <Route path="/" component={Home} />
          <SecureRoute path="/profile" component={Profile} />
        </Switch>
      </Security>

Home.js

const { oktaAuth, authState } = useOktaAuth();
const login = async () => await oktaAuth.signInWithRedirect();
const logout = async () => oktaAuth.signOut();

const renderLogin = () => {
        if(!authState) {
          return <div>Loading...</div>;
        }
    
        if(!authState.isAuthenticated) {
            return (
            <div>
                <p>Not Logged in yet</p>
                <button onClick={login}>Login</button>
            </div>
            );
        }
    
        return (
            <div style={{backgroundColor:'blue'}}>
                <p>Logged in!</p>
                <button onClick={logout}>Logout</button>
            </div>
        );
    }    

    return (
        <div style={{height:'100%',justifyContent:'center', alignItems:'center',display:'flex'}}>
            {renderLogin()}
        </div>
    );

FYI

"@okta/okta-auth-js": "^7.2.0",
"@okta/okta-react": "^6.7.0",

Update:

Here's what i'm seeing with oktaAuth after redirected back from Okta Hosted Login.

Issue resolved:

Root cause identified, it was due to the use of different router from react-router-dom

import { BrowserRouter as Router } from "react-router-dom"; --- use this
// import { HashRouter as Router } from "react-router-dom"; --- this give issue, due to the extra # return in url

Issue resolved:

Root cause identified, it was due to the use of different router from react-router-dom

import { BrowserRouter as Router } from "react-router-dom"; --- use this
// import { HashRouter as Router } from "react-router-dom"; --- this give issue, due to the extra # in url

Also I have added 1 extra key:value while initializing OktaAuth. Previously it was not part of my declaration.

const oktaAuth = new OktaAuth({
    clientId: CLIENT_ID,
    issuer: ISSUER,
    redirectUri: REDIRECT_URI,
    scopes: ['openid', 'profile', 'email'],
    pkce: true,
    disableHttpsCheck: OKTA_TESTING_DISABLEHTTPSCHECK,
  });