[Bug]: v7 useMatches and handle not working as expected in route module

[discoverlance-com]

I am not sure if this issue also persists when using the file system routing convention but I noticed it whilst using the Route Configuration convention.

Edit: I also tried it in the file based routing and it's the same result.

This is my routes as defined below whilst using routes config.

import {
	index,
	layout,
	prefix,
	route,
	type RouteConfig,
} from '@react-router/dev/routes'

export default [
	layout('./routes/public/layout.tsx', [
		index('routes/public/home.tsx'),
		route('forgot-password', 'routes/public/forgot-password.tsx'),
	]),
	...prefix('app', [
		layout('./routes/dashboard/layout.tsx', [
			index('./routes/dashboard/route.tsx'),
			layout('./routes/dashboard/account/layout.tsx', [
				...prefix('account', [
					index('./routes/dashboard/account/route.tsx'),
					route('password', './routes/dashboard/account/password/route.tsx'),
				]),
			]),
		]),
	]),
] satisfies RouteConfig

I have added handle function to the three pages in my app layout, ./routes/dashboard/route.tsx (/app), ./routes/dashboard/account/route.tsx (/app/account) and /routes/dashboard/account/password/route.tsx (/app/account/password).

I am trying to add breadcrumbs to my pages so for each of the handle functions in the 3 pages, I have added some breadcrumb information. See the example below for the breadcrumb information for the route: ./routes/dashboard/account/route.tsx (/app/account).

//./routes/dashboard/account/route.tsx

export const handle = {
	breadcrumb: true,
	href: '/app/account',
	text: 'Account',
}

But when I run useMatches either in the root or in the app route layout, all the matches return quite weird route ids corresponding to the layouts and the current page with each of them having an undefined handle. So I only always get the information from the handle route function defined in the current page. See an example log of the matches from useMatches in the browser below:

[
    {
        "id": "root",
        "pathname": "/",
        "params": {},
        "data": {
            "toastMessage": null,
            "toastType": null,
            "theme": null
        }
    },
    {
        "id": "routes/dashboard/layout",
        "pathname": "/",
        "params": {},
        "data": {
            "defaultSidebarOpen": true,
        }
    },
    {
        "id": "routes/dashboard/account/layout",
        "pathname": "/",
        "params": {},
        "data": null
    },
    {
        "id": "routes/dashboard/account/password/route",
        "pathname": "/app/account/password",
        "params": {},
        "data": null,
        "handle": {
            "breadcrumb": "/app/account/password",
            "href": "/app/account/password",
            "text": "Password"
        }
    }
]

Originally posted by @discoverlance-com in #12428

[discoverlance-com]

This is a reproduction of the issue, https://codesandbox.io/p/devbox/ecstatic-tereshkova-l3qcph

[discoverlance-com]

@pcattori, I noticed this issue hasn't received attention yet, and I was wondering if it's on the radar. Please let me know if there's anything I can do to assist and whether it's an issue at all, I might be mistaken on how the hook works but from what I can gather on how it's supposed to work, I am not getting the accurate results. Thank you!