Реализовать функции отмены / подтверждения react

const STATUS_CONFIRMED = 'confirmed';
const STATUS_PENDING = 'pending';
const STATUS_CANCELED = 'canceled';

const renderStatus = {
  confirmed: 'Подтверждён',
  pending: 'Не подтверждён',
  canceled: 'Отменён'
};

class User extends React.Component {
  render() {
    return (
      <div className="user">
        <img className="user__avatar" src={this.props.avatar} alt="фото." />
        <div className="user__info">
          <p className="user__text">{`${this.props.name}, ${this.props.role}`}</p>
          {this.props.status && (
            <p className={`user__status ${this.props.status}`}>{renderStatus[this.props.status]}</p>
          )}
        </div>
      </div>
    );
  }
}

class CalendarEvent extends React.Component {
  state = {
    currentUser: 34047044,
    owner: { id: 34049221, name: 'Павел', role: 'Технический директор', avatar: './images/1.png' },
    subject: 'Обсуждение редизайна административной панели сайта',
    invited: [
      {
        id: 34049119,
        name: 'Татьяна',
        role: 'Дизайнер',
        status: STATUS_CONFIRMED,
        avatar: './images/2.png'
      },
      {
        id: 34047044,
        name: 'Кирилл',
        role: 'Разработчик',
        status: STATUS_PENDING,
        avatar: './images/3.png'
      },
      {
        id: 34048196,
        name: 'Константин',
        role: 'Менеджер',
        status: STATUS_CANCELED,
        avatar: './images/4.png'
      }
    ],
    durationdate: '10.11.2021',
    timeStart: '14:30',
    duration: 40,
    location: 'Переговорная №4'
  };

  getCurrentUserConfirmationStatus() {
    for(let i=0; i < this.state.invited.length; i++){
      if(this.state.currentUser === this.state.invited[i].id){
        return this.state.invited[i].status
      }
    }    
  }

  confirm() {  
    const getStatus = this.getCurrentUserConfirmationStatus()
    this.setState(prevState)({
      ...prevState,
      invited: [
        ...prevState.invited,           
        {getStatus}: "confirmed"
      ]
    })
  }

  cancel() {
    const getStatus = this.getCurrentUserConfirmationStatus()
    this.setState(prevState({
      ...prevState,
      invited: [
        ...prevState.invited,           
        {getStatus}: "canceled"
      ]
    }))
  }

  render() {
    const confirmed = this.getCurrentUserConfirmationStatus() === STATUS_CONFIRMED;
    return (
      <section className="main">
        <div className="calendar">
          <p className="calendar__menu">Тема:</p>
          <h1 className="calendar__title">{this.state.subject}</h1>
          <p className="calendar__menu">Организатор:</p>
          <User {...this.state.owner} />
          <p className="calendar__menu">Приглашены:</p>
          <div className="calendar__invited">
            {this.state.invited.map((user, index) => (
              <User key={index} {...user} />
            ))}
          </div>
          <p className="calendar__menu">Дата:</p>
          <p className="calendar__text">{this.state.durationdate}</p>
          <p className="calendar__menu">Начало:</p>
          <p className="calendar__text">{this.state.timeStart}</p>
          <p className="calendar__menu">Продолжительность:</p>
          <p className="calendar__text">{this.state.duration}</p>
          <p className="calendar__menu">Место:</p>
          <p className="calendar__text">{this.state.location}</p>
        </div>
        <div className="buttons">
          <button className="button cancel" type="button" onClick={this.cancel}>
            Отменить
          </button>
          <button className="button confirm" type="button" onClick={this.confirm}>
            Подтвердить
          </button>
        </div>
      </section>
    );
  }
}

ReactDOM.render(<CalendarEvent />, document.querySelector('#root'));

.main {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 700px;
  margin: 0 auto;
  padding: 40px;
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  color: #000;
  border: 1px solid #000;
}

.calendar {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px 20px;
}

.calendar__menu {
  font-size: 16px;
  line-height: 20px;
  color: #999;
  margin: 0;
}

.calendar__title {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  margin: 0;
}

.calendar__invited {
  display: flex;
  flex-direction: column;
}

.user {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user:last-child {
  margin-bottom: 0;
}

.user__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 8px;
}

.user__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 14px;
  line-height: 16px;
}

.user__text {
  margin: 0;
}

.user__status {
  margin: 4px 0 0;
}

.user__status.confirmed {
  color: #02B241;
}
.user__status.pending {
  color: #999999;
}
.user__status.canceled {
  color: #FF3B30;
}

.calendar__text {
  font-size: 16px;
  line-height: 20px;
  margin: 0;
}

.buttons {
  margin: auto 0 0 auto;
  display: flex;
}

.button {
  padding: 16px;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 20px;
}

.cancel {
  color: #000;
  border: 1px solid #000;
  background-color: #fff;
  margin-right: 24px;
}

.confirm {
  color: #fff;
  background-color: #000;
  border: none;
}

@media (max-width: 1000px) {
  .main {
    width: 80%;
  }
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    <link rel="stylesheet" href="./fonts/fonts.css" />
    <link rel="stylesheet" href="./style.css" />
    <script src="https://code.s3.yandex.net/react/libs/react.development.js"></script>
    <script src="https://code.s3.yandex.net/react/libs/react-dom.development.js"></script>
    <script src="https://code.s3.yandex.net/react/libs/babel.min.js"></script>
    </head>
    <body>
    <div id="root"></div>

  <script type='text/jsx' src="task.jsx"></script>
    </body>
</html>