Okta Auth <Security/> Component seems to have a problem with reach-router

Questions OAuth/OIDC
1

Here is the error that I get once I run the application.

ERROR in ./node_modules/@okta/okta-react/bundles/okta-react.esm.js 284:14-27

export ‘useRouteMatch’ (imported as ‘useRouteMatch’) was not found in ‘react-router-dom’ (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)

Here is what my code looks like in my Index.tsx file.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "mdb-react-ui-kit/dist/css/mdb.min.css";

import { Security } from "@okta/okta-react";
import { OktaAuth } from "@okta/okta-auth-js";

const config = {
  clientId: "***************************",
  issuer: "https://*********************/oauth2/default",
  redirectUri: "http://localhost:3000/login/callback",
  scopes: ["openid", "profile", "email"],
  pkce: true,
};

const oktaAuth = new OktaAuth(config);

const restoreOriginalUri = () => {
  // Callback function to restore URI during login
};

ReactDOM.render(
  <React.StrictMode>
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
      <App />
    </Security>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

If anyone could help this would be great!