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

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 🌎

Start with examples/nextjs-with-typescript/src/Link.tsx and compare it with the Stack Overflow approach linked in the issue. Check the current MUI and Next.js integration guidance before deciding which pattern should be recommended. Done means the maintained example or relevant documentation clearly presents the agreed integration approach.