为什么 Material UI 按钮在 onClick 事件上不能正常工作？

Question

使用 material-ui 按钮时，单击按钮内的文本会触发单击事件但不显示按钮的 id。当我点击按钮的角落时，它只显示 id。

 <Button
        id="2"
        variant="contained"
        color="secondary"
        className={classes.button}
        startIcon={<DeleteIcon />}
        onClick={(event) => console.log(event.target.id)}
      >
        Delete
 </Button>

我尝试在按钮上添加 z-index，但没有成功

示例代码：

https://codesandbox.io/s/infallible-meninsky-1met8?file=/src/App.js