I have a Material ui menu in the following way:

```html
<Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={!!anchorEl} onClose={handleClose}>
    <MenuItem onClick={handleClose}>Profile</MenuItem>
    <MenuItem onClick={handleClose}>Log Out</MenuItem>
</Menu>

```

and want to use next.js `Link` tags with the`MenuItem`. What is the best way to do this?

I tried the following things:

---

The following doesn't render the `<a>` tag, but adds href to the `<li>` tag.

```html
<Link href={'#'} passHref><MenuItem onClick={handleClose}>Log Out</MenuItem></Link>

```

I could add a prop to MenuItem to render `<a>` instead of `<li>` tag, however, since the menu is nested under `<ul>` tag, I'm not sure if having `<ul><a>Log Out</a></ul>` is a good idea

---

The following throws an error

```html
<MenuItem onClick={handleClose} component={<Link href={'#'}>Log Out</Link>}></MenuItem>

```

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