http-proxy-middleware does not work properly

Question

first of all, I am using react, typescript, axios, and http-proxy-middleware.

setupProxy.ts

import { createProxyMiddleware } from "http-proxy-middleware";
import { Application } from "express";

function applyProxy(app: Application) {
  app.use(
    "/asia",
    createProxyMiddleware({
      target: "https://asia.api.riotgames.com",
      changeOrigin: true,
    }),
  );
  app.use(
    "/kr",
    createProxyMiddleware({
      target: "https://kr.api.riotgames.com",
      changeOrigin: true,
    }),
  );
}

export default applyProxy;

searchPage

const getSummoner = async (userName: string, tag: string) => {
    const data = await fetch(
    `/asia/riot/account/v1/accounts/by-riot-id/${userName}/${tag}`,
  );
};

I have https://asia.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${userName}/${tag} I'm hoping the request goes to the address, but the actual behavior is http://localhost:3000/asia/riot/account/v1/account.../${userName}/${tag} The request is being sent to the address . Can you tell me why?

I have https://asia.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${userName}/${tag} I'm hoping the request goes to the address, but the actual behavior is http://localhost:3000/asia/riot/account/v1/account.../${userName}/${tag} The request is being sent to the address . Can you tell me why?