[BUG] ThemedTitle renders nested <a> tags causing React 19 hydration error

[matsuba-gs]

Describe the bug

@refinedev/mui's ThemedTitle component renders nested <a> elements, which is invalid HTML and causes a hydration error in React 19.

The component wraps a MuiLink (which renders as <a> by default) inside a Refine Link (which also renders as <a>):

// packages/mui/src/components/themedLayout/title/index.tsx
<Link to="/" style={{ textDecoration: "none" }}>   {/* → <a> */}
  <MuiLink underline="none" ...>                    {/* → <a> (nested!) */}
    ...
  </MuiLink>
</Link>

Error message

[browser] In HTML, <a> cannot be a descendant of <a>.
This will cause a hydration error.

[browser] <a> cannot contain a nested <a>.

Steps To Reproduce

1. Use ThemedLayout from @refinedev/mui with Next.js 16 + React 19
2. Open the app in a browser
3. Observe the hydration error in the browser console

Expected behavior

No nested <a> tags. MuiLink inside Link should not render as <a>.

Suggested fix

Replace MuiLink with Box (or add component="div") so the wrapper does not render as <a>:

<Link to="/" style={{ textDecoration: "none" }}>
  <Box sx={{ display: "flex", alignItems: "center", gap: "12px", ...wrapperStyles }}>
    ...
  </Box>
</Link>

Packages

System:

• OS: macOS

Refine Packages:

• @refinedev/core: 5.0.12
• @refinedev/mui: 8.0.2
• @refinedev/nextjs-router: 7.0.5

Other:

• Next.js: 16.2.6
• React: 19.2.6

[07ReuelBodhak]

I opened a PR for this issue: #7422 (comment)