TRPC v10 how to achieve pathnames with dash in routes

Question

In TRPCv9 the way we defined routes was something like this

const appRouter = trpc.router()
  .query('greeting', {
    input: z.string(),
    resolve({ input }) {
      return `hello ${input}!`;
    },
  });

Now in TRPCv10, as stated in the migration from v9 to v10 docs portion, we have

const appRouter = router({
  greeting: publicProcedure
    .input(z.string())
    .query(({ input }) => `hello ${input}!`),
});

Given their example, I assume for a dashed delimited pathname we have to do something similar to the code below. However, this approach turns to be a little bit ugly when calling the trpc endpoint from the FE side.

// server-side
const registerUser = router({
  ["register-user"]: procedure
    .input(registerUserInputSchema)
    .mutation(async ({ ctx, input }) => {
      ....
    },
  });

// fe-side

function RegisterPage() {
  const { handleSubmit, register } = useForm();
  // See Appendix why we have users. here 
  const {} = trpc["users"]["register-user"].useMutation();

  return (
    <>
      <form action=""></form>
      <Link href="/login">Login</Link>
    </>
  );
}

Nevertheless, is there a way to achieve cleaner code using V10?

Appendix

We have a prefix of users. when we call the register-user route because we have merged the user router in the app router like so

import { router } from "../trpc";
import { userRouter } from "./user.router";

export const appRouter = router({
  ["users"]: userRouter,
});

export type AppRouter = typeof appRouter;