MUI MenuItem与NextJS13 Link结合使用报错求助

使用版本：

• MUI：@mui/material: "^5.13.5"
• Next.js：next: "13.4.5"

导入语句：

import MenuItem from "@mui/material/MenuItem";
import { Link } from "next/link";

尝试的方案与报错 #

方案A #

<Link href={`/main`}>
  <a>
    <MenuItem key={1}>lorem</MenuItem>
  </a>
</Link>

报错：

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'muiSkipListHighlight')

方案B #

<MenuItem key={1}>
 <Link href={`/main`}>
   lorem
 </Link>
</MenuItem>

报错：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of ResponsiveAppBar（ResponsiveAppBar是我创建的组件）

方案C #

先定义组件：

function ALink() {
    return <Link href="/">lorem</Link>;
}

使用方式：

<MenuItem key={1} component={ALink()}>
</MenuItem>

报错：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of MuiButtonBaseRoot

方案D（Link内添加a标签） #

<MenuItem key={1}>
 <Link href={`/main`}>
   <a>lorem</a>
 </Link>
</MenuItem>

报错：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

移除Link后的正常状态 #

<MenuItem key={1}>
  {/* <Link href={`/main`}>asd</Link> */}
  lorem
</MenuItem>

此状态下组件正常，但无法满足跳转需求。

注：曾找到临时方案，但使用Link实现页面内锚点滚动时仍存在问题。

内容的提问来源于stack exchange，提问作者AleOjeda