title: Right click on nested component triggering twice react
body: <p>I am using material ui's tree component which is a bunch of nested treeItem components. I would like to have a rightClick event trigger on each individual tree node. I use onContextMenu to do so, however, since my components are nested, when I right click an inner component the right click event triggers twice, once for the inner component I just right clicked and once for its parent component. Any ideas how I can stop this from occuring?</p>
  
  <p>my code:</p>
  
  <pre><code>function Tree( props ) {
  
    // Recursively generate tree items passed to component
    const renderTree = ( nodes ) =&gt; (
      &lt;TreeItem key = {nodes.id} nodeId = {nodes.id} label = {nodes.name} onContextMenu = {rightClick}&gt;
        {Array.isArray( nodes.children ) ? nodes.children.map( (node) =&gt; renderTree(node) ) : null}
      &lt;/TreeItem&gt;
    )
  
    const rightClick = (event) =&gt; {
      event.preventDefault();
      alert("LOL")
    }
  
    return (
      &lt;div&gt;
      &lt;TreeView
        defaultCollapseIcon = {&lt;ExpandMoreIcon /&gt;}
        defaultExpandIcon = {&lt;ChevronRightIcon /&gt;}
        multiSelect&gt;
        {renderTree( props.treeItems )}
      &lt;/TreeView&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>