I can't understand why the events passed to the buttonSend component are called only if the row is in the first place in the table?

Question

JavaScript

I can't figure out why onClick fires only on the very first row, and not on all the buttons that are rendered in the table

@computed get addDataTable() {
        return this.data.map((elementArray, index) =>
            <tr key={elementArray.key} id={elementArray.key}>
                <th>{elementArray.name}</th>
                <th className="anim">{Math.round(elementArray.temp) - 273}&#176;</th>
                <th>
                    {/* <button className="upButton" onClick={this.up}>Вверх</button> */}
                    <ButtonSend
                        upButton
                        valueButton="Вверх"
                        clickButton={this.up}
                    />
                </th>
                <th>
                    {/* <button className="downButton" onClick={this.down}>Вниз</button> */}
                    <ButtonSend
                        downButton
                        valueButton="Вниз"
                        clickButton={this.down}
                    />
                </th>
                <th key={elementArray.key + 1}>
                    <ButtonSend
                        modalUseDelete
                        key={elementArray.key}
                        valueButton="Удалить"
                        clickButton={this.modalOpen}
                    />
                    <ButtonSend
                        modalUseReturn
                        key={elementArray.key}
                        valueButton="Восстановить"
                        clickButton={this.returnActive}
                    />
                    {/* <button className="modalUseDelete" onClick={this.modalOpen}>Удалить</button>
                    <button className="modalUseReturn" onClick={this.returnActive}>Восстановить</button> */}
                </th>

            </tr>
        );
    };

class ButtonSend extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    };
    render() {
        const props = this.props
        return (
            <button onClick={props.clickButton}
                className={classNames('button', {
                    buttonSend: props.buttonSend,
                    upButton: props.upButton,
                    downButton: props.downButton,
                    modalUseDelete: props.modalUseDelete,
                    modalUseReturn: props.modalUseReturn,
                })}>
                {this.props.valueButton}
            </button>
        );
    };
}

export default ButtonSend;

class Table extends Component {
    render () {
        console.log(store.result);
        console.log(store.data);
        return (
            <table>
                <thead>
                    <tr>
                        <th>
                            <img src="https://img.icons8.com/clouds/100/000000/city.png" alt="city"/>
                            <br></br>
                            Название
                        </th>
                        <th>
                            <img src="https://img.icons8.com/clouds/100/000000/temperature-outside.png" alt="temp"/><br></br>
                            Температура
                        </th>
                        {/* Температура в цельсиях, можно добавить по щелчку на температуру чтобы он ее менял в таблице пересчитывал 
                        в фаренгейты */}
                        <th>
                            <img src="https://img.icons8.com/clouds/100/000000/up.png" alt="up"/><br></br>
                            {/* <img src="https://img.icons8.com/nolan/64/up.png" alt="up"/><br></br> */}
                            Вверх
                        </th>
                        <th>
                            <img src="https://img.icons8.com/clouds/100/000000/u-turn.png" alt="down"/><br></br>
                            Вниз
                        </th>
                        {/* удалить/восстановить должна меняться динамично в зависимости от статуса записи */}
                        <th>
                            <img src="https://img.icons8.com/clouds/100/000000/delete-sign.png" alt="del"/><img src="https://img.icons8.com/clouds/100/000000/circular-arrows.png" alt="return"/><br></br>
                            Удалить/Восстановить
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {/* Добавляет город и температуру в таблицу */}
                    {store.addDataTable}
                </tbody>
            </table>
        );
    };
};