React Hooks: Шаблон параметра в nestedRoute не заменяется на параметр

Проблема: при переходе по URL /edit/:bankCode/general-info или /edit/:bankCode, переданный параметр не заменяет :bankCode. Т.е. вместо /edit/VCS или /edit/VCS/general-info я получаю /edit/:bankCode и /edit/:bankCodeS/general-info соответственно.

Компонент управления роутингом:

import React, {
  ForwardedRef,
  forwardRef,
  ForwardRefExoticComponent,
  PropsWithRef,
} from 'react';
import { Route, Switch } from 'react-router-dom';
import { IRoute } from '../types/route';
import Redirect from './Redirect';

type TFormComponent = ForwardRefExoticComponent<PropsWithRef<IRoutingProps>>;

interface IRoutingProps {
  routes: IRoute[];
  path?: string;
  defaultRoute?: string;
  ref?: ForwardedRef<HTMLElement>;
  [key: string]: any;
}

const Routing = forwardRef(({ routes, path, defaultRoute, ...rest }, ref) => {
  const isDefaultRouteAvailable =
    path &&
    defaultRoute &&
    routes.findIndex((route: IRoute) => route.path === defaultRoute) !== -1;

  return (
    <Switch>
      {routes.map((route, i) => {
        console.log(i, route.path, route.exact);
        return (
          <Route key={i} path={route.path} exact={route.exact}>
            <route.component
              name={route.name}
              path={route.path}
              routes={route.routes}
              defaultPath={route.defaultPath}
              ref={ref}
              {...rest}
            />
          </Route>
        );
      })}

      {isDefaultRouteAvailable ? (
        <Redirect from={path} to={defaultRoute} />
      ) : null}
    </Switch>
  );
}) as TFormComponent;

export default Routing;

Объект роутов:

import GeneralInfo from '../components/steps/GeneralInfo';
import BankList from '../pages/BankList';
import Editing from '../pages/Editing';
import { IRoute } from '../types/route';

export const routes: IRoute[] = [
  {
    path: '/',
    name: 'Bank List',
    component: BankList,
    exact: true,
  },
  {
    path: '/edit/:bankcode',
    defaultPath: '/edit/:bankcode/general-info',
    name: 'Edit a new bank',
    component: Editing,
    routes: [
      {
        path: '/edit/:bankcode/general-info',
        name: 'General info',
        component: GeneralInfo,
        exact: true,
      },
    ],
  },
];

Вызов роутинга по клику из компонента BankList происходит по клику на Link компонент: (Объект данных для передачи в компонент таблицы)

const data = useMemo(() => {
    if (!banks) return [];

    return banks.map(bank => {
      return {
        bankCode: { content: bank.bankCode },
        bankName: { content: bank.bankName },
        modifiedDate: { content: bank.modifiedDate || bank.createdDate },
        edit: {
          renderCell: () => (
            <Link to={`/edit/${bank.bankCode}/general-info`}>
              <EditIcon fontSize="small" color="primary" />
            </Link>
          ),
        },
      };
    });
  }, [banks]);