title: Why is each MenuItem in my react-contextmenu list identical?
body: <p>For reference, I'm using <a href="https://www.npmjs.com/package/react-contextmenu" rel="nofollow noreferrer">react-contextmenu</a> to add context menues to my app.
  I have items in a list, and you can right-click each item to do some actions with it. Each item provides a context menu that is also a list, so I have a couple of <code>map</code> methods in my code. (I made sure to use unique keys as per the info <a href="https://reactjs.org/docs/lists-and-keys.html" rel="nofollow noreferrer">here</a> and <a href="https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318" rel="nofollow noreferrer">here</a>). However, this is the behavior I'm observing (right-clicking any item in the list <em>always</em> shows me the context menu for the last item in the list):</p>
  <p><a href="https://i.stack.imgur.com/SbOQM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SbOQM.png" alt="enter image description here" /></a></p>
  <p>Here's my code:</p>
  <pre><code>function ListItem(props) { 
    // console.log(`CONTEXT OPTIONS for ${props.name}:\n${JSON.stringify(props.contextOptions)}`);
  
    // console.log(`Mapped context options for ${props.name}:\n${props.contextOptions.map((option) =&gt; option.label + option.subLabel)}`);
  
    const contextOptions = props.contextOptions.map((option) =&gt; 
      &lt;MenuItem 
        key={option.label + option.subLabel} 
        disabled={option.disabled} 
        divider={option.divider}&gt;
          {option.label}&lt;span className=&quot;context-sublabel&quot;&gt;{option.subLabel}&lt;/span&gt;
      &lt;/MenuItem&gt;  
    );
  
    return (
      &lt;div&gt;
        &lt;ContextMenuTrigger id=&quot;list-item-context&quot;&gt;
          &lt;div className={&quot;list-item-container&quot; + (props.selected ? &quot; list-item-selected&quot; : &quot;&quot;)}
            onClick={ () =&gt; props.onSelection(props.index) } &gt;
            &lt;p className=&quot;list-item-label&quot;&gt;{props.name}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/ContextMenuTrigger&gt;
        &lt;ContextMenu id=&quot;list-item-context&quot;&gt;
          {contextOptions}
        &lt;/ContextMenu&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>I've even gone as far as throwing print statements everywhere to ensure I wasn't somehow passing down a list of the same context menu info too. For instance at one point I wrote the map like so:</p>
  <pre><code>  const contextOptions = props.contextOptions.map((option) =&gt; {
      console.log(`Item: ${props.name}, label: ${option.label}, sub-label: ${option.subLabel}`);
  
      return (&lt;MenuItem 
        key={option.label + option.subLabel} 
        disabled={option.disabled} 
        divider={option.divider}&gt;
          {option.label}&lt;span className=&quot;context-sublabel&quot;&gt;{option.subLabel}&lt;/span&gt;
      &lt;/MenuItem&gt;);
    });
  </code></pre>
  <p>Output proved my data was correct:</p>
  <pre><code>Item: ITEM A, label: Copy &quot;ITEM A&quot;, sub-label: 
  Item: ITEM A, label: , sub-label: 
  Item: ITEM A, label: Connect, sub-label:  - [PRIMARY IP A]
  Item: ITEM A, label: Connect, sub-label:  - [BACKUP IP A]
  Item: ITEM B, label: Copy &quot;ITEM B&quot;, sub-label: 
  Item: ITEM B, label: , sub-label: 
  Item: ITEM B, label: Connect, sub-label:  - [PRIMARY IP B]
  Item: ITEM B, label: Connect, sub-label:  - [BACKUP IP B]
  Item: ITEM C, label: Copy &quot;ITEM C&quot;, sub-label: 
  Item: ITEM C, label: , sub-label: 
  Item: ITEM C, label: Connect, sub-label:  - [PRIMARY IP C]
  Item: ITEM C, label: Connect, sub-label:  - [BACKUP IP C]
  </code></pre>
  <p>Note: empty labels or sub-labels is fine in the context of my app.</p>
  <p>I literally can't figure out why the UI actually getting rendered isn't showing the correct text. Perhaps it isn't supported? Every example I've seen of this library being used showed explicitly written out <code>MenuItem</code> JSX.</p>