React nested route with params in the middle

Question

I have a module in react project and want to use nested routes with params in the middle of url, but after clicking the link it redirects to not found page. The current page url like this:

"/AssetContext/Transfers/123"

And the nested route on the same page is like this:

"/AssetContext/Transfers/123/NewTransferItem"

My module is like this:

import React, { Component, Suspense } from "react";
import TransferDetails from "./transfer-details";
import { Link, Route, Switch  } from "react-router-dom";

const Test = React.lazy(() => import("./test"));
const TransferItems = React.lazy(() => import("./transfer-items"));
const NewTransferItem = React.lazy(() => import("./new-transfer-item"));

class TransferItemsContainer extends Component {
  state = {
    transferId: this.props.match.params.id
  };

  render() {
    const { transferId } = this.state;
    return (
      <>
        <TransferDetails transferId={transferId} />

        <Link to={`/AssetContext/Transfers/${transferId}/test`}>test</Link>
        <Link to={`/AssetContext/Transfers/${transferId}/TransferItems`}>Transfer Items</Link>
        <Link to={`/AssetContext/Transfers/${transferId}/NewTransferItem`}>New Transfer Items</Link>

        <Switch>
          <Route
            exact
            path={`/AssetContext/Transfers/:transferId/test`}
            component={Test}
          />

          <Route
            path="/AssetContext/Transfers/:transferId/TransferItems"
            render={() => <TransferItems transferId={transferId} />}
          />

          <Route
            path="/AssetContext/Transfers/:transferId/NewTransferItem"
            render={() => <NewTransferItem transferId={transferId} />}
          />
        </Switch>
      </>
    );
  }
}

export default TransferItemsContainer;

But the routes don't hit! what is the problem?!