реагировать после выбора одной кнопки отключить другие кнопки

Question

• У меня есть кнопка в панели расширения.
• , как это будет много панелей расширения, и каждая панель расширения будет иметь одну кнопку
• , когда я нажимаю одну кнопку водна панель расширения.Мне нужно набрать другие кнопки.
• , поэтому я подумал, что нацеливаюсь на каждую кнопку, используя e.target.id
• , но когда я пытаюсь напечатать e, ее печать выглядит так sportsSelected e---> Proxy {dispatchConfig: {…}, _targetInst: FiberNode, isDefaultPrevented: ƒ, isPropagationStopped: ƒ, _dispatchListeners: ƒ, …} [[Handler]]: Object [[Target]]: Class [[IsRevoked]]: false
• подскажите, как это исправить.
• предоставив мой фрагмент кода ниже

class sportsData extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showIncludeSelected: true,

            showIncludeSelectedButtons: true
        }

    }

      sportsSelected = (e) => {
        this.setState({ showIncludeSelected: false });
        console.log("sportsSelected e--->", e);
    }




    render() {
        const { totalCount, initialIndex, finalIndex } = this.state;
        const { resultSet, radioValues } = this.props;
        const { canEdit, value } = this.state;
        const { checkBoxvalues } = this.state;


        // console.log("csr resultSet.jumpNumbers--->", resultSet.jumpNumbers);

        const WithState = toRenderProps(
            withState('anchorEl', 'updateAnchorEl', null)
        );
        let dots = '..';
        let matchedjumpNumber;
        let defaultjumpNumber;
        let matchedrunr;
        let jumpInactive;
        let matchedLicenseNumber;
        let runrExpired = false;
        let jumpNumberExpired = false;

        let displayName = resultSet.displayName;
        let originalName = resultSet.displayName
        if (displayName.length > 50) {
            displayName = displayName.substring(0, 50) + dots;
        }

        const { typeAhead, typeAheadMode, classes, handleSubmit, uploadLOAs, enableEdit,
            type,
            onChangeCheckbox,
            // checks,
            fieldTypeRadio } = this.props;
        return (

            <div>

                <MuiThemeplayer theme={theme2}>

                    <ExpansionPanel>
                        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}
                        >
                            <Typography style={{ width: '100%' }} //className={classes.heading}
                            >
                                {' '}
                                <div className={styles.row} key={resultSet.playerId}

                                >

                                    <div className={styles.col30}><a
                                        title={originalName}> {displayName ? this.handleplayerName(displayName, typeAhead, resultSet) : ''} </a>
                                    </div>
                                    <div className={styles.col}>{resultSet.category}</div>
                                    <div
                                        className={runrExpired ? dataStyles.dataInactive : styles.col}>{matchedrunr ? matchedrunr.number : null}</div>
                                    <div
                                        className={styles.col10}>{DataFormat.maskweruiuiw(resultSet.weruiuiwType, resultSet.formattedweruiuiw)}</div>
                                    <div
                                        className={jumpNumberExpired ? (dataStyles.dataInactive + ' ' + dataStyles.jump) : styles.col10}>
                                        {matchedjumpNumber ? matchedjumpNumber.number : null}
                                        {(resultSet.jumpNumbers && resultSet.jumpNumbers.length > 1) ?
                                            <FA name="plus" className={dataStyles.additionalMessage} /> : ""}

                                        {/*{resultSet.jumpNumbers}*/}
                                    </div>
                                    {/*<div className={styles.col10}>{resultSet.playerId}</div>*/}
                                    {/*<div className={styles.col10}>{matchedLicenseNumber ? matchedLicenseNumber.number : null}</div>*/}
                                </div>
                            </Typography>
                        </ExpansionPanelSummary>
                        <ExpansionPanelDetails>
                            <Typography>

                                <div className={classes.root}>


                                    {this.renderExpansionPanel()}


                                    <div style={{ borderTop: '1px solid black' }} >
                                        <Button
                                            variant="outlined"
                                            color="primary"
                                            size="small"
                                            style={{
                                                display: this.state.showIncludeSelected ? '' : 'none',
                                                color: '#009688', border: '1px solid #009688',
                                                marginLeft: 740, marginTop: 8


                                            }}


                                            onClick={this.sportsSelected}
                                            className={classes.button}
                                        >

                                            Include Selected
                                        </Button>
                                        <Button
                                            variant="outlined"
                                            color="#009688"
                                            size="small"
                                            style={{
                                                display: !this.state.showIncludeSelected ? '' : 'none',
                                                color: '#009688',
                                                border: '1px solid #009688',
                                                marginLeft: 740, marginTop: 8


                                            }}
                                            onClick={this.removeSelected}

                                        >



                                            remove Selected
                                        </Button>
                                    </div>

                                </div>





                            </Typography>
                        </ExpansionPanelDetails>
                    </ExpansionPanel>
                </MuiThemeplayer>
            </div>
        );
    }

}