`<UserButton.UserProfilePage>` is not showing when `__clerk_modal_state` is used to show modal

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/jebibot/clerk-repro-1

Publishable key

pk_test_c2FjcmVkLWRvdmUtOC5jbGVyay5hY2NvdW50cy5kZXYk

Description

Steps to reproduce:

"use client";

import { UserButton } from "@clerk/nextjs";

export default function CustomUserButton() {
  return (
    <UserButton>
      <UserButton.UserProfilePage label="Custom Page" url="custom" labelIcon={<DotIcon />}>
        <CustomPage />
      </UserButton.UserProfilePage>
    </UserButton>
  );
}

"eyJwYXRoIjoiIiwiY29tcG9uZW50TmFtZSI6IlVzZXJQcm9maWxlIiwic3RhcnRQYXRoIjoiL3VzZXIiLCJzb2NpYWxQcm92aWRlciI6IiJ9"
  === btoa(JSON.stringify({path: "", componentName: "UserProfile", startPath: "/user", socialProvider: ""}))

1. Log in
2. Visit http://localhost:3000/?__clerk_modal_state=eyJwYXRoIjoiIiwiY29tcG9uZW50TmFtZSI6IlVzZXJQcm9maWxlIiwic3RhcnRQYXRoIjoiL3VzZXIiLCJzb2NpYWxQcm92aWRlciI6IiJ9

Expected behavior:

Actual behavior:

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (32) x64 AMD Ryzen 9 9950X3D 16-Core Processor          
    Memory: 6.92 GB / 61.52 GB
  Binaries:
    Node: 24.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.13.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.32.1 - C:\Users\y\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 147.0.7727.103
    Edge: Chromium (147.0.3912.72)
    Firefox: 148.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe
  npmPackages:
    @clerk/nextjs: ^7.3.0 => 7.3.0 
    @tailwindcss/postcss: ^4 => 4.2.4 
    @types/node: ^20 => 20.19.39 
    @types/react: ^19 => 19.2.14 
    @types/react-dom: ^19 => 19.2.3 
    eslint: ^9 => 9.39.4 
    eslint-config-next: 16.2.4 => 16.2.4 
    next: 16.2.4 => 16.2.4 
    react: 19.2.4 => 19.2.4 
    react-dom: 19.2.4 => 19.2.4 
    tailwindcss: ^4 => 4.2.4 
    typescript: ^5 => 5.9.3

Start with the linked reproduction and reproduce the UserButton.UserProfilePage behavior using the supplied __clerk_modal_state URL. Trace the UserButton and UserProfilePage handling for that modal state, then verify the custom page is shown as expected and add or run a regression test covering this URL flow.