React Router is Not working when using octa-react

I am using octa-react library for authentication here. I have also given the dependencies below. I'm trying to pass my config data to octa login page if its authenticated then redirect to admin page in the project. In terminal its not showing any error but when I run this code its showing me this error. I'm stuck with this from last three days.
No routes matched location "/" App.js

import React,{ PureComponent } from "react";
import axios from "axios";
import { BrowserRouter as Router, Route, Routes, useNavigate } from "react-router-dom";
import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
import { Security, LoginCallback, SecureRoute } from "@okta/okta-react";
import { createStore } from "redux";
import { Provider } from "react-redux";
import { createBrowserHistory } from "history";
import Home from "./Home";
import { allReducers } from "./redux/reducers";
import Loader from "./views/Common/Loader";
const browserHistory = createBrowserHistory();
const oktaauth = new OktaAuth(config.oidc);
const store = createStore(
  allReducers,
  {},
  window.devToolsExtension && window.devToolsExtension()
);
const HasAccessToRouter = ({ data }) => {
  const history = useNavigate();
  const restoreoriginalUri = async (_oktaAuth, originalUri) => {
    history.replace(toRelativeUrl(originalUri || '/', window.location.origin));
  };
   return (
    <Security {...data.oidc} oktaAuth={oktaauth} restoreOriginalUri={restoreoriginalUri} >
      <SecureRoute path="/" exact element={ <Home data={data} />}/>
      <Routes>
      <Route exact path="/implicit/callback" element={LoginCallback} />
      </Routes>
    </Security>
  );
};
class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      response: {},
    };
  }
  componentDidMount() {
    this.getSettingsFromFile();
  }
  getSettingsFromFile = async () => {
    try {
      const response = await axios.get(
        `${
          process.env.PUBLIC_URL
            ? process.env.PUBLIC_URL
            : `${window.location.origin}`
        }/settings.json`
      );
      localStorage.setItem("apiUrl", response.data.API_URL || "");
      this.setState({
        isLoading: false,
        response: response.data,
        //dashboardtype:""
      });
    } catch (error) {
      this.setState({
        isLoading: false,
        response: {},
      });
    }
  };
  render() {
    const { response, isLoading } = this.state;
    if (isLoading) {
      return <Loader />;
    }
    return (
      <div>
        <Provider store={store}>
          <Router
            history={browserHistory}
            basename={process.env.PUBLIC_URL || "/admini"}>
            <Routes>
              <Route element={ <HasAccessToRouter data={response} /> } />
            </Routes>   
          </Router>
        </Provider>
      </div>
    );
  }
}
export default App;

Home.js

import { useOktaAuth } from "@okta/okta-react";
import React, { useEffect, useState } from "react";
import DefaultLayout from "./containers/DefaultLayout/DefaultLayout";
// import Login from "./Login";
import { Spin, Button } from "antd";
import { isEmpty } from "lodash";
const Home = (props) => {
  const { authState, oktaAuth } = useOktaAuth();
  const [userInfo, setUserInfo] = useState(null);
  useEffect(() => {
    if (!authState.isAuthenticated) {
      // When user isn't authenticated, forget any user info
      setUserInfo(null);
    } else {
      oktaAuth.getUser().then((info) => {
        setUserInfo(info);
      });
    }
  }, [authState, oktaAuth ]); // Update if authState changes

  // redirect to okta login
  const login = async () => {
    oktaAuth.signInWithRedirect();
  };
  return (
    <div>
      {authState.isAuthenticated !== null && (
        <div>
          {authState.isAuthenticated && !isEmpty(userInfo) ? (
            <div>
            <DefaultLayout {...props} />
            </div>
          ) : (
            <div className="spinner">
              <Spin tip="Loading..." />
            </div>
          )}
          {!authState.isAuthenticated && (
            <div>
              <p>Please login to access the portal.</p>
              <Button id="login-button" type={"primary"} onClick={login}>
                Login
              </Button>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default Home;

package.json

"dependencies": {
        "@ant-design/icons": "^4.7.0",
        "@coreui/coreui": "^4.2.0",
        "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
        "@coreui/icons": "2.1.0",
        "@coreui/react": "^4.3.0",
        "@okta/okta-auth-js": "^6.7.6",
        "@okta/okta-react": "^6.5.0",
        "@okta/okta-signin-widget": "^6.5.0",
        "antd": "^4.21.7",
        "antd-password-input-strength": "^2.0.1",
        "axios": "^0.27.2",
        "bootstrap": "^5.2.0",
        "classnames": "^2.3.1",
        "core-js": "^3.23.5",
        "cross-env": "7.0.3",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.6",
        "flag-icon-css": "^3.3.0",
        "font-awesome": "^4.7.0",
        "history": "^5.3.0",
        "lodash": "^4.17.21",
        "moment": "^2.29.4",
        "moment-timezone": "^0.5.34",
        "node-sass": "^7.0.1",
        "prop-types": "^15.8.1",
        "react": "^18.2.0",
        "react-app-polyfill": "^3.0.0",
        "react-chartjs-2": "^4.3.1",
        "react-datalist": "^4.0.0",
        "react-datalist-field": "^20.3.1",
        "react-dom": "^18.2.0",
        "react-helmet": "^6.1.0",
        "react-hot-loader": "^4.13.0",
        "react-idle-timer": "^5.4.1",
        "react-loadable": "^5.5.0",
        "react-redux": "^8.0.2",
        "react-router-dom": "^6.3.0",
        "react-scripts": "5.0.1",
        "react-spinners": "^0.13.3",
        "react-test-renderer": "^18.2.0",
        "reactstrap": "^9.1.2",
        "redux": "^4.2.0",
        "redux-thunk": "^2.4.1",
        "simple-line-icons": "^2.5.5"
    }