title: Material-UI Menu component only last MenuItem onClick action is triggered
body: <p>Recently I tried to implement a simple dropdown menu using MaterialUI(4.3.3)'s Menu and MenuItem components.</p>
  
  <p>The onclick event on the MenuItem is not behaving correctly. When <code>console.log(id)</code> is called, every component is echoing the last element from sample array. I switched to ListItem, the problem is gone.</p>
  
  <pre><code>
  const Test = () =&gt; {
      const [anchorEl, setAnchorEl] = React.useState(null);
      const sampleArray = ["test1", "test2", "test3"];
      const open = Boolean(anchorEl);
  
      return (
          sampleArray.map(id =&gt; {
              let curID = id;
              return (&lt;&gt;
                  &lt;IconButton
                      aria-label="more"
                      aria-controls="long-menu"
                      aria-haspopup="true"
                      onClick={event =&gt; setAnchorEl(event.currentTarget)}
                  &gt;
                      &lt;MoreHorizIcon /&gt;
                  &lt;/IconButton&gt;
                  &lt;Menu
                      elevation={0}
                      id="long-menu"
                      anchorEl={anchorEl}
                      keepMounted
                      open={open}
                      transformOrigin={{
                          vertical: 'top',
                          horizontal: 'center',
                      }}
                      onClose={() =&gt; setAnchorEl(null)}
                  &gt;
                      &lt;MenuItem onClick={() =&gt; {
                          setAnchorEl(null);
                          console.log(curID); // should be each individual id, but here always "test3"
                      }}&gt;Test&lt;/MenuItem&gt;
                  &lt;/Menu&gt;
              &lt;/&gt;);
          })
      )
  }
  </code></pre>
  
  <p>Is this the desired behavior for Menu? How to resolve it?</p>