title: MUI Select custom MenuItem not working properly
body: <p>I have a problem regarding MUI's <code>MenuItem</code> when combined with <code>Select</code> and rendering it in a separate component.</p>
  <p>Here's the <a href="https://codesandbox.io/s/mui-select-custom-menuitem-qq7op" rel="nofollow noreferrer">codesandbox</a></p>
  <p>Basically, I have something like this:</p>
  <pre><code>import { Select } from &quot;@material-ui/core&quot;;
  import CustomMenuItem from &quot;./CustomMenuItem&quot;;
  import React from &quot;react&quot;;
  
  export default function App() {
    const userIds = [1, 2, 3];
    return (
      &lt;Select
        id=&quot;user&quot;
        name=&quot;User&quot;
        onChange={(event: React.ChangeEvent&lt;{ value: unknown }&gt;) =&gt; {
          alert(event.target.value as number);
        }}
      &gt;
        {userIds.map((userId) =&gt; (
          &lt;CustomMenuItem key={userId} userId={userId} /&gt;
        ))}
      &lt;/Select&gt;
    );
  }
  </code></pre>
  <p>And this is the custom item:</p>
  <pre><code>import { MenuItem, Typography } from &quot;@material-ui/core&quot;;
  import React from &quot;react&quot;;
  
  interface CustomMenuItemProps {
    userId: number;
  }
  
  const CustomMenuItem = React.forwardRef&lt;HTMLLIElement, CustomMenuItemProps&gt;(
    (props: CustomMenuItemProps, ref) =&gt; {
      const { userId, ...rest } = props;
      return (
        &lt;MenuItem value={userId} {...rest} ref={ref}&gt;
          &lt;Typography&gt;{userId}&lt;/Typography&gt;
        &lt;/MenuItem&gt;
      );
    }
  );
  export default CustomMenuItem;
  </code></pre>
  <p>At first, I've done this without any refs, but this gave me an error in the console (<code>Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?</code>), so after googling a while, I found out that I have to pass this ref. I also pass the <code>...rest</code> of the props, as I understand that the <code>MenuItem</code> needs them.</p>
  <p>Expected behavior: when I click on the <code>MenuItem</code>, it gets selected in the <code>Select</code> component.</p>
  <p>Actual behavior: nothing happens.</p>
  <p>The thing is, I made the <code>CustomMenuItem</code> to make it reusable. But before that, I had a simple function like: <code>renderItem</code> which I used both in <code>Select.renderValue</code> and in <code>userIds.map</code> and it had the same code as <code>CustomMenuItem</code> - it returned the same JSX tree. And it worked then, but it doesn't work now, for some reason. So if I would do:</p>
  <pre><code>    &lt;Select
        id=&quot;user&quot;
        name=&quot;User&quot;
        onChange={(event: React.ChangeEvent&lt;{ value: unknown }&gt;) =&gt; {
          alert(event.target.value as number);
        }}
      &gt;
        {userIds.map((userId) =&gt; (
          &lt;MenuItem key={userId} value={userId}&gt;
            &lt;Typography&gt;{userId}&lt;/Typography&gt;
          &lt;/MenuItem&gt;
        ))}
      &lt;/Select&gt;
  </code></pre>
  <p>it simply works :(</p>
  <p>Am I missing something here?</p>