сохранение индекса в состоянии по клику, странное поведение

Question

Я сопоставляю массив и отображаю их в виде кнопки.Когда пользователи нажимают на кнопку, я сохраняю индекс и отображаю данные в зависимости от этого индекса.Но есть странное поведение.Когда я нажимаю на первую кнопку, она не сохраняет индекс в состоянии.Только после нажатия на другие кнопки, он начинает сохранять, но неверный индекс.В чем может быть проблема?

displayButtons() {
    const { data } = this.state
    let sortedButtons = data.map((items, idx) => {
      return (
        <Button
          key={idx}
          className="project-btn"
          primary
          onClick={() => this.setState({ index: idx })}
        >
          {items.title}
        </Button>
      )
    })
    return sortedButtons
  }

displayData() {
    const { data, index } = this.state
    let sortedData = data[index].settings.map((item, id) => {
      const { _init_ } = item.settings
      return _init_.map((message, index) => {
        const { message_content } = message

        return message_content === undefined ? null : (
          <div key={index}>
            <div>
              <div className="settings-message">{message_content}</div>
            </div>
            <div>yes</div>
          </div>
        )
      })
    })
    return sortedData
  }