How To Route Masking Properly With File Based Routing

// 1st
routes/ 
├── __root.tsx
├── _pages.tsx
├── _pages.product.index.tsx
├── _pages.product.$productId.tsx
├── _pages.product.$productId.modal.tsx


// 2nd
routes/
├── __root.tsx
├── _pages.tsx
├── _pages.product.index.tsx
├── _pages.product.$productId.tsx
├── _pages.product_.$productId.modal.tsx

// Link to modal
<Link
 to="/shop/$productId/modal"
 params={{ productId: product.id }}
>
 {product.name}
</Link>

// router.tsx
const productModalToProductMask = createRouteMask({
  routeTree,
  from: "/shop/$productId/modal",
  to: "/shop/$productId",
  params: (prev) => ({
   productId: prev.productId,
  }),
  unmaskOnReload: true,
});

export function createRouter() {
  const router = createTanStackRouter({
    routeTree,
    scrollRestoration: true,
    routeMasks: [productModalToProductMask],
    defaultNotFoundComponent: () => <div>404 Not found</div>,
  });
  return router;
}