"Cannot read property 'slice' of undefined" in onClick handler

Question

Codesandbox I am trying to implement a month range filter (X-axis) in react. My chart renders like below currently Below is the applyDateFilter() in the code.

export default class App extends Component {
  constructor(props) {
    super(props);
    const title = "chart-filter";
    const lessThanOrGreaterThan = "lessThan";
    const filterLimit = 100;
    const levelsArr = [
      "Jan",
      "Feb",
      "Mar",
      "April",
      "May",
      "June",
      "July",
      "Aug"
    ];
    const months = [
      { month: "Jan", value: "0" },
      { month: "Feb", value: "1" },
      { month: "Mar", value: "2" },
      { month: "Apr", value: "3" },
      { month: "May", value: "4" },
      { month: "Jun", value: "5" },
      { month: "Jul", value: "6" },
      { month: "Aug", value: "7" }
    ];
    const from = "0";
    const toMonth = "7";
    this.chartData = {
      dataSet1: Array.from(
        { length: 8 },
        () => Math.floor(Math.random() * 590) + 10
      ),
      dataSet2: Array.from(
        { length: 8 },
        () => Math.floor(Math.random() * 590) + 10
      )
    };
    this.state = {
      months: [
        { month: "Jan", value: "0" },
        { month: "Feb", value: "1" },
        { month: "Mar", value: "2" },
        { month: "Apr", value: "3" },
        { month: "May", value: "4" },
        { month: "Jun", value: "5" },
        { month: "Jul", value: "6" },
        { month: "Aug", value: "7" }
      ]
    };
  }
  componentDidMount() {
    this.barChart = new Chart("bar", {
      type: "bar",
      options: {
        responsive: true,
        title: {
          display: true,
          text: "Student Admission Data"
        }
      },
      data: {
        labels: ["Jan", "Feb", "Mar", "April", "May", "June", "July", "Aug"],
        datasets: [
          {
            type: "bar",
            label: "School 1",
            data: this.chartData.dataSet1,
            backgroundColor: "rgba(20,200,10,0.4)",
            borderColor: "rgba(20,200,10,0.4)",
            fill: false
          },
          {
            type: "bar",
            label: "School 2",
            data: this.chartData.dataSet2,
            backgroundColor: "rgba(100,189,200,0.4)",
            borderColor: "rgba(100,189,200,0.4)",
            fill: false
          }
        ]
      }
    });
  }

  applyDateFilter() {
    this.barChart.data.labels = this.levelsArr.slice(
      parseInt(this.from),
      parseInt(this.toMonth) + 1
    );
    this.barChart.update();
  }
  render() {
    return (
      <div class="chart-diplay">
        <div>
          <canvas id="bar"></canvas>
          <div>
            <select
              id="from"
              value={this.state.from}
              onChange={(e) => this.setState({ from: e.target.value })}
            >
              {this.state.months.map((el) => (
                <option value={el.value} key={el}>
                  {" "}
                  {el.month}{" "}
                </option>
              ))}
            </select>
            &nbsp;&nbsp;
            <select
              id="toMonth"
              value={this.state.toMonth}
              onChange={(e) => this.setState({ toMonth: e.target.value })}
            >
              {this.state.months.map((el) => (
                <option value={el.value} key={el}>
                  {" "}
                  {el.month}{" "}
                </option>
              ))}
            </select>
          </div>
          <button class="button" onClick={() => this.applyDateFilter()}>
            Apply Date Filter
          </button>
        </div>
      </div>
    );
  }
}     

Upon clicking the button, the applyDateFilter is suppose to filter the chart, like below However, It's returning the following error: 'Cannot read property 'slice' of undefined'