title: How to use Next.js Link (next/link) component in a Material UI Menu?
body: <p>I have a Material ui menu in the following way:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;Menu id=&quot;simple-menu&quot; anchorEl={anchorEl} keepMounted open={!!anchorEl} onClose={handleClose}&gt;
      &lt;MenuItem onClick={handleClose}&gt;Profile&lt;/MenuItem&gt;
      &lt;MenuItem onClick={handleClose}&gt;Log Out&lt;/MenuItem&gt;
  &lt;/Menu&gt;
  </code></pre>
  <p>and want to use  next.js <code>Link</code> tags with the<code>MenuItem</code>. What is the best way to do this?</p>
  <p>I tried the following things:</p>
  <hr />
  <p>The following doesn't render the <code>&lt;a&gt;</code> tag, but adds href to the <code>&lt;li&gt;</code> tag.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;Link href={'#'} passHref&gt;&lt;MenuItem onClick={handleClose}&gt;Log Out&lt;/MenuItem&gt;&lt;/Link&gt;
  </code></pre>
  <p>I could add a prop to MenuItem to render <code>&lt;a&gt;</code> instead of <code>&lt;li&gt;</code> tag, however, since the menu is nested under <code>&lt;ul&gt;</code> tag, I'm not sure if having <code>&lt;ul&gt;&lt;a&gt;Log Out&lt;/a&gt;&lt;/ul&gt;</code> is a good idea</p>
  <hr />
  <p>The following throws an error</p>
  <pre class="lang-html prettyprint-override"><code>&lt;MenuItem onClick={handleClose} component={&lt;Link href={'#'}&gt;Log Out&lt;/Link&gt;}&gt;&lt;/MenuItem&gt;
  </code></pre>
  <p>Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.</p>