Navigating between Configurable Tab and Personal App

Question

So basically, I need to navigate from a configurable tab (one that is open during a meeting) to a page inside a personal tab.

I am aware of the microsoftTeams.pages.navigateToApp() function and right now my one looks a bit like this

await microsoftTeams.pages.navigateToApp({
  appId: this.environment.clientId,
  pageId: PageA.pageId, // directs to /room
  subPageId: PageA.subpageId, // this is :meetingId in /room/:meetingId
  webUrl: `<a-url>`,
})

As far as I understand, while you won't navigate directly to the subpageId, it will be provided in the context.page.subPageId field provided by the app.getContext() call.

However when I execute this, context.page.subPageId ends up being undefined when the personal app opens. Is there something I might be missing here ?

Basically what the code looks like is this.

const setupWebUrl = async () => {
  await microsoftTeams.app.initialize();

  const context = await microsoftTeams.app.getContext();

  const searchParams = new URLSearchParams({
    theme: context.app.theme,
  });

  if (context.user) {
    const { tenant, loginHint } = context.user

    if (tenant.id) {
      searchParams.append("tenantId", tenant.id);
    }

    if (loginHint) {
      searchParams.append("loginHint", loginHint);
    }
  }

  const subpageId = encodeURIComponent(PageA.subpageId)

  await microsoftTeams.pages.navigateToApp({
    appId: this.environment.clientId,
    pageId: PageA.pageId, // directs to /room
    subPageId, // this is :meetingId in /room/:meetingId which I will navigate to when the page defined by `pageId` gets loaded
    webUrl: `<a-url>?${searchParams.toString()}`,
  })

}