отключить другие кнопки с помощью e.target.id

Question

• У меня есть десять панелей расширения.
• при нажатии одной кнопки на одной панели расширения мне нужно отключить другие кнопки на другой панели расширения
• , но проблема заключается в том, когда я пытаюсьдля цели с идентификатором I он не возвращается e.target.id
• , он просто возвращается как переданное значение.
• подскажите, как это исправить.
• предоставив мою песочницу и фрагмент кода ниже.

https://codesandbox.io/s/material-demo-zi66l

diableOtherButtons = e => {
    console.log("diableOtherButtons e--->", e);
  };


  render() {
    const { classes } = this.props;
    console.log("get started *8888888888888888888888888888888888888888888888");
    return (
      <div className={classes.root}>
        <ExpansionPanel>
          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
            <Typography className={classes.heading}>first</Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails>
            <Typography>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
              eget.
              <Typography>
                <Button
                  onClick={e => {
                    this.diableOtherButtons("s", "d");
                  }}
                  variant="outlined"
                  color="primary"
                  size="small"
                  // className={classes.button}
                >
                  button click
                </Button>
              </Typography>
            </Typography>
          </ExpansionPanelDetails>