title: Map function returns the same result on all buttons
body: <p>I am tyring to map an object that looks like this:</p>
  <pre><code>['note_title_test', 'note_title_test2', 'note_title_test32', 'note_title_test232', 'test title', 'testing1']
  </code></pre>
  <p>Here is my map function:</p>
  <pre><code>           {results.map((note, idx) =&gt; {
                      console.log(results);
                      return(
                          &lt;Grid container spacing={0}&gt;
                              &lt;Grid item sm={11} md={11} lg={11}&gt;
                              &lt;ListItemButton className={classes.list} key={idx} onClick={(idx) =&gt; handleList(note, idx)} selectedindex={idx}&gt;
                                  &lt;ListItemText key={idx} primary={note} secondary=&quot;date&quot;/&gt;
                              &lt;/ListItemButton&gt; 
                              &lt;/Grid&gt;
                              &lt;Grid key={idx} item sm={1} md={1} lg={1}&gt;
                                  &lt;IconButton
                                  className={classes.tagButton}
                                  onClick={handleClick}
                                  aria-controls=&quot;basic-menu&quot;
                                  aria-haspopup=&quot;true&quot;
                                  aria-expanded={open ? open : undefined}
                                  &gt;
                                          &lt;LabelIcon className={classes.listTag}/&gt;
                                  &lt;/IconButton&gt;
                                  &lt;Menu
                                  id={idx}
                                  anchorEl={anchorEl}
                                  open={open}
                                  onClose={handleClose}
                                  MenuListProps={{
                                      'aria-labelledby': 'basic-button',
                                  }}
                                  &gt;
                                      &lt;MenuItem id={idx} onClick={() =&gt; changeLabel(note, &quot;#00AF54&quot;)}&gt;
                                          &lt;Box sx={{ width: &quot;2vh&quot;, height: &quot;2vh&quot;, backgroundColor: &quot;#00AF54&quot;}}
                                          &gt;
                                          &lt;/Box&gt;
                                          &lt;p&gt;green&lt;/p&gt;
                                      &lt;/MenuItem&gt;
                                  &lt;/Menu&gt;
                              &lt;/Grid&gt;
                          &lt;/Grid&gt;
  </code></pre>
  <p>When I click on the MenuItem, the desired outcome is just logging the correct note title, however, every MenuItem outputs the last item in the object ('testing1') instead of the item that I am clicking on.</p>
  <p>I've gone over my code all morning but haven't been able to figure out. Am I missing something?</p>