Почему преобразование этой реагирующей функции в класс создает эти сообщения об ошибках?

Question

Я следую этому учебнику о том, как создать средство выбора даты в React / JS, и ради единообразия в моем коде проекта я хотел бы использовать определение класса в моем компонент выбора даты. Но когда я попытался преобразовать «Final datepicker component» из учебника в класс, я получил эти сообщения об ошибках (есть еще такие сообщения, где переменная или обратный вызов не определены, но я воздержусь от post:

./src/components/datepicker/datepicker.jsx
  Line 73:13:   'focusedDate' is not defined                no-undef
  Line 74:13:   'isDateFocused' is not defined              no-undef
  Line 75:13:   'isDateSelected' is not defined             no-undef
  Line 76:13:   'isDateHovered' is not defined              no-undef

// Мой компонент datepicker (это вызывает ошибки, но если я использую определение функции в учебнике, все в порядке):

/** @jsx jsx */
import { React, useState } from "react";
import { useDatepicker, START_DATE } from "@datepicker-react/hooks";
import { jsx } from "@emotion/core";
import Month from "./month";
import NavButton from "./nav_button";
import DatepickerContext from "./context";

class Datepicker extends React.Component {
  constructor(props) {
    const [state, setState] = useState({
      startDate: null,
      endDate: null,
      focusedInput: START_DATE
    });

    const {
      firstDayOfWeek,
      activeMonths,
      isDateSelected,
      isDateHovered,
      isFirstOrLastSelectedDate,
      isDateBlocked,
      isDateFocused,
      focusedDate,
      onDateHover,
      onDateSelect,
      onDateFocus,
      goToPreviousMonths,
      goToNextMonths
    } = useDatepicker({
      startDate: state.startDate,
      endDate: state.endDate,
      focusedInput: state.focusedInput,
      onDatesChange: this.handleDateChange
    });

    this.handleDateChange = this.handleDateChange.bind(this);
    this.formatDate = this.formatDate.bind(this);
  }

  handleDateChange(data) {
    if (!data.focusedInput) {
      this.setState({ ...data, focusedInput: START_DATE });
    } else {
      this.setState(data);
    }
  }

  // Formatting date 
  formatDate(date) {
    let splitDate = date.split('/');
    let month = splitDate[0];
    let day = splitDate[1];
    let yr = splitDate[2];

    if (month < 10) {
      month = '0' + month;
    }

    if (day < 10) {
      day = '0' + day;
    }

    return month + '/' + day + '/' + yr;
  }

  render() {
    return (
      <div className="calendar-wrapper">
        <DatepickerContext.Provider
          value={{
            focusedDate,
            isDateFocused,
            isDateSelected,
            isDateHovered,
            isDateBlocked,
            isFirstOrLastSelectedDate,
            onDateSelect,
            onDateFocus,
            onDateHover
          }}
        >
        <div>
          <strong>Start date: </strong>
          {state.startDate && formatDate(state.startDate.toLocaleDateString())}
        </div>
        <div>
          <strong>End date: </strong>
          {state.endDate && formatDate(state.endDate.toLocaleDateString())} 
        </div>

        <NavButton onClick={goToPreviousMonths}>Previous</NavButton>
        <NavButton onClick={goToNextMonths}>Next</NavButton>

        <div
          css={{
            display: "grid",
            margin: "32px 0 0",
            gridTemplateColumns: `repeat(${activeMonths.length}, 300px)`,
            gridGap: "0 64px"
          }}
        >
          {activeMonths.map(month => (
            <Month
              key={`${month.year}-${month.month}`}
              year={month.year}
              month={month.month}
              firstDayOfWeek={firstDayOfWeek}
            />
          ))}
        </div>
        </DatepickerContext.Provider>
      </div>
    );
  }
}

экспорт по умолчанию Datepicker;