title: Event.stopPropogation does not seem to work for Material UI container
body: <p>I have a page which has this.</p>
  
  <pre><code>&lt;div&gt;
    &lt;Link key={row.id} onUpdateTask={this.props.onUpdateTask} to= {`/Supervisor/Task/${row.id}`}&gt;
       &lt;Paper className={classes.root} key={row.id}&gt;
          &lt;Grid container xs={12} className={classes.topContainer}&gt;
             &lt;Grid item xs={3}&gt;
                &lt;IconButton
                   className={classes.priorityIconButton}
                   aria-owns={anchorEl ? 'simple-menu' : undefined}
                   onClick={(e) =&gt; {this.handleClick(e, index)}}&gt;   
                 &lt;/IconButton&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={9}&gt;
                &lt;Typography className={classes.activity} variant="body1"&gt;{row.name}&lt;/Typography&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/Paper&gt;
       &lt;/Link&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>ON clicking the icon,It needs to open up a Menu.</p>
  
  <pre><code>handleClick = (event, index) =&gt; {
      event.stopPropagation();
      console.log("I came nereee")
      this.setState({ anchorEl: event.currentTarget, rowIndex: index });
    }
  </code></pre>
  
  <p>But the <code>handleClick</code> does not get triggered in spite of having <code>stopPropogation</code> event inside. The page just routes to the edit page (parent container on click leads to edit page). How can I ensure that the parent container is still clickable, but on clicking the Menu item, it still does what it needs to do and does not do its parents action?</p>