How to use Next.js Link (next/link) component in a Material UI Menu?

I have a Material ui menu in the following way:

<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 theMenuItem. 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.

<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

<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.