Routing Priority issue

imports...

type Bindings = {
  Variables: {
    orgId: number;
    clerkUserId: string;
  };
};

const app = new Hono<{ Variables: Bindings["Variables"] }>();

app.use("/*", cors());
app.use("/*", logger());

app.use(
  "/:slug/business/*",
  clerkMiddleware({
    publishableKey: process.env.CLERK_PUBLISHABLE_KEY_BUSINESS,
    secretKey: process.env.CLERK_SECRET_KEY_BUSINESS,
  })
);
app.use("/:slug/business/*", authMiddleware);

app.use(
  "/:slug/portal/*",
  clerkMiddleware({
    publishableKey: process.env.CLERK_PUBLISHABLE_KEY_PORTAL,
    secretKey: process.env.CLERK_SECRET_KEY_PORTAL,
  })
);
app.use("/:slug/portal/*", async (c, next) => {
  await next();
});

// -- What I thought should be correct Routing Priority (Static before dynamic) --
const routes = app
  .route("/api", apiRouter)
  .route("/:slug/business", businessRouter)
  .route("/:slug/portal", portalRouter);

app.onError(errorHandler);

export type AppType = typeof routes;

const port = Number(process.env.PORT) || 3000;
serve({
  fetch: app.fetch,
  port,
});

export const client = async () => {
  const { getToken } = await auth();
  const token = (await getToken()) ?? "";

  return hc<AppType>(url, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
};

export default async function PortalLandingPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const apiClient = await client();

// api with type any - with no type inference
  const res = await apiClient.api.organizations[":slug"].$get({
    param: { slug },
  });