Find custom ftl page url

[tadstr]

I created a page loginExtra with
In the main Login page, I want to click on button and go to the loginExtra via something like
const { url } = kcContext;
<a href={url.loginExtraUrl}>Link to Extra page</a>

How do I know the url to go to loginExtra is?

export type KcContextExtension = {
      pageId: "login.ftl";
      extraThemeProperties: { foo: string };
      url: {
        loginExtraUrl: string;
      };
    }

export const { getKcContext } = createGetKcContext<KcContextExtension>({
  mockData: [
    {
      pageId: "loginQr.ftl",
      locale: {
        currentLanguageTag: "en",
      },
      realm: {
        name: "loginQr",
      },
    },
    {
      pageId: "login.ftl",
      locale: {
        currentLanguageTag: "en",
      },
       url: {
        loginQrUrl: WHAT_URL_TO_WRITE_IN_HERE,
      },
    },
 ],
});