am new in react and a have this problem, that my event is most of the time getting undefined and I don't understand whats wrong with it, here is my code :

class DayPicker extends Component {
  constructor(props) {
    super(props)
    this.state = {
      sortedDays: {},
      index: this.props.index,
      buttonList: [],
      list: [],
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.buttonList === this.state.buttonList)
      this.setState({index: this.props.index})
  }


  setButtonList = () => {
    let buttonList = []
    let button = {}
    let index = 0
    let sortedDays = this.props.sortedDays

    for (let day in sortedDays) {
      button = (
        <Button value={index} onClick={this.props.onIndexChange}>
          {dayjs(day).format("D MMM")}
        </Button>
      )
      buttonList.push(button)
      index++
    }
    return buttonList
  }

  render() {
    const { buttonList, list } = this.state

    return (
      <div>
        <ButtonGroup>{buttonList}</ButtonGroup>
        <table>{list}</table>
      </div>
    )
  }
}

class AgendaSection extends Component {
  constructor(props) {
    super(props)

    this.state = {
      sortedDays: [],
      sessions: props.sessions,
      index: 0,
    }
  }

  onChange = event => {
    this.setState({ index: event.target.value })
  }

  render() {
    const { sortedDays, index } = this.state
    return (
      <div>
        <DayPicker
          sortedDays={sortedDays}
          index={index}
          onIndexChange={this.onChange}
        />
      </div>
    )
  }
}

So i'm using 2 class DayPicker and AgendaSection, DayPicker is getting the onChange function from props giving by AgendaSection I don't understand what i've done wrong to make my event work "sometimes" Any issues on this problem ?