[link] What's the recommended way of using MUI Link with Next.js Link?

[KKS1]

Current behavior 😯

Currently the way its suggested to integrate MUI Link to NextJS Link component is use the example in
https://github.com/mui-org/material-ui/blob/ec5df5f94f472628103eb1cfbecccc6afc2658bd/examples/nextjs-with-typescript/src/Link.tsx

Expected behavior 🤔

https://stackoverflow.com/a/66228870
This basically, gives the same functionality, without the overhead.

import NextLink from 'next/link'
import MuiLink from '@material-ui/core';

<NextLink href="/" passHref>
    <MuiLink>MyLink</MuiLink>
</NextLink>

Steps to reproduce 🕹

https://stackoverflow.com/a/66228870
vs
https://github.com/mui-org/material-ui/blob/ec5df5f94f472628103eb1cfbecccc6afc2658bd/examples/nextjs-with-typescript/src/Link.tsx

Context 🔦

What's the recommended way of using Mui Link with NextJs Link.

Your environment 🌎

`npx @mui/envinfo`

.. ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

[Zirafnik]

Is there an update on this?

Is there a reason to prefer the example boilerplate code in Link.tsx, over:

• above mentioned option

<NextLink href="/" passHref>
    <MUILink>Your Link</MUILink>
</NextLink>

• or even this solution: link to another answer

Next.js docs on passHref