How to get the context with RouterContext using in v6.22?

Question

I am new to React development and was assigned with task of upgrading to the latest libraries. Looking at the existing code seems to be written generically to meet any react project using react-router v5.

I am looking at a code solution using react-router v6 in the routing part that is given

code in react-client.js

import { hydrate as render, renderRoutes } from '@mna/react'
import createStore from '@mna/store'
import connectReduxDevTools from '@mna/store/redux'

// From react-server/render
const initState = window.__INIT_STATE__
const splitPoints = window.__SPLIT_POINTS__ || []

const siteName = window.location.hostname

export default function renderClient({ App, routes, bundles = {} }) {

  const store = createStore(App)

  if (initState) store.setState(initState, { silent: true })

  connectReduxDevTools(store)

  const el = document.getElementById('root')
  const renderApp = () => render(
    <BrowserRouter>
      { renderRoutes(routes, { store, siteName }) }
    </BrowserRouter>,
    el
  )

  store.on('setState', renderApp)

  return Promise.all(
    splitPoints.map(chunk => bundles[chunk] ? bundles[chunk].loadComponent() : (
      console.warn('Route chunk not found', { chunk, bundles }) && Promise.resolve()
    ))
  ).then(renderApp)
}

renderRoutes.js

import { Route } from 'react-router'
import Switch from './Switch'

const renderRoutes = (routes, routeProps = {}, switchProps = {}) =>{
  return routes ? (
    <Switch {...switchProps}>
      { routes.map((route, i) => (
        <Route
          key={route.key || i}
          path={route.path}
          exact={route.exact}
          strict={route.strict}
          render={props =>
            route.render
              ? route.render({ ...props, ...routeProps, route })
              : <route.component {...props} {...routeProps} route={route} />
          }
        />
      ))}
    </Switch>
  ) : null
}

export default renderRoutes

switch.js

import { __RouterContext as RouterContext, matchPath } from "react-router"

/**
 * The public API for rendering the first <Route> that matches.
 */
export default class Switch extends React.Component {
  render() {
    return (
      <RouterContext.Consumer>
        {context => {

          const location = this.props.location || context.location

          let element, match

          // We use React.Children.forEach instead of React.Children.toArray().find()
          // here because toArray adds keys to all child elements and we do not want
          // to trigger an unmount/remount for two <Route>s that render the same
          // component at different URLs.
          React.Children.forEach(this.props.children, child => {
            if (match == null && React.isValidElement(child)) {
              element = child

              const path = child.props.path || child.props.from

              match = path
                ? matchPath(location.pathname, { ...child.props, path })
                : context.match
            }
          })

          return match
            ? React.cloneElement(element, { location, computedMatch: match })
            : null
        }}
      </RouterContext.Consumer>
    )
  }
}

how can I achieve same kind of functionality keeping it generic. Please let me know if you need any further details related to the code.

Thanks in advance.