преобразовать реактивный день-пикет в функциональный компонент

Question

В течение долгого времени я пытался преобразовать этот компонент, основанный на реакции дня, основанный на классе, в функциональный компонент с помощью хуков, но получение некоторых ошибок могло бы мне помочь. Это ссылка для компонента http://react-day-picker.js.org/examples/input-from-to

Это код.

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.handleFromChange = this.handleFromChange.bind(this);
    this.handleToChange = this.handleToChange.bind(this);
    this.state = {
      from: undefined,
      to: undefined,
    };
  }

  showFromMonth() {
    const { from, to } = this.state;
    if (!from) {
      return;
    }
    if (moment(to).diff(moment(from), 'months') < 2) {
      this.to.getDayPicker().showMonth(from);
    }
  }

  handleFromChange(from) {
    // Change the from date and focus the "to" input field
    this.setState({ from });
  }

  handleToChange(to) {
    this.setState({ to }, this.showFromMonth);
  }

  render() {
    const { from, to } = this.state;
    const modifiers = { start: from, end: to };
    return (
      <div className="InputFromTo">
        <DayPickerInput
          value={from}
          placeholder="From"
          format="LL"
          formatDate={formatDate}
          parseDate={parseDate}
          dayPickerProps={{
            selectedDays: [from, { from, to }],
            disabledDays: { after: to },
            toMonth: to,
            modifiers,
            numberOfMonths: 2,
            onDayClick: () => this.to.getInput().focus(),
          }}
          onDayChange={this.handleFromChange}
        />{' '}
        —{' '}
        <span className="InputFromTo-to">
          <DayPickerInput
            ref={el => (this.to = el)}
            value={to}
            placeholder="To"
            format="LL"
            formatDate={formatDate}
            parseDate={parseDate}
            dayPickerProps={{
              selectedDays: [from, { from, to }],
              disabledDays: { before: from },
              modifiers,
              month: from,
              fromMonth: from,
              numberOfMonths: 2,
            }}
            onDayChange={this.handleToChange}
          />
        </span>
        <Helmet>
          <style>{`
  .InputFromTo .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
    background-color: #f0f8ff !important;
    color: #4a90e2;
  }
  .InputFromTo .DayPicker-Day {
    border-radius: 0 !important;
  }
  .InputFromTo .DayPicker-Day--start {
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
  }
  .InputFromTo .DayPicker-Day--end {
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
  }
  .InputFromTo .DayPickerInput-Overlay {
    width: 550px;
  }
  .InputFromTo-to .DayPickerInput-Overlay {
    margin-left: -198px;
  }
`}</style>
        </Helmet>
      </div>
    );
  }
}

Это мой код, я создал отдельный файл css для стилей

const [from,setFromDate] = useState(undefined);
    const [to,setToDate] = useState(undefined);

    const showFromMonth = () => {
        if (!from) {
          return;
        }
        if (moment(to).diff(moment(from), 'months') < 2) {
          to.getDayPicker().showMonth(from);
        }
    }

    const handleFromChange = (from) => {
        setFromDate({ from });
    }

    const handleToChange = (to) => {
        setState({ to }, showFromMonth);
    }
<div className="InputFromTo">
   <DayPickerInput
      value={from}
      classNames={classes.fromDate}
      placeholder="From"
      format="LL"
      formatDate={formatDate}
      parseDate={parseDate}
      fixedWeeks={4}
      dayPickerProps={{
        selectedDays: [from, { from, to }],
        disabledDays: [{ after: new Date(moment()) }],
        toMonth: to,
        // modifiers,
        numberOfMonths: 1,
        // onDayClick: () => getInput().focus(),
        localeUtils: MomentLocaleUtils, locale: "id"
      }}
      inputProps={{
        id :"from-day"
      }}

      onDayChange={handleFromChange}
   />{' '}
      —{' '}
   <span className="InputFromTo-to">
     <DayPickerInput
        // ref={el => (this.to = el)}
        // value={to}
        placeholder="To"
        format="LL"
        classNames={classes.toDate}
        formatDate={formatDate}
        parseDate={parseDate}
        dayPickerProps={{
           // selectedDays: [from, { from, to }],
           // disabledDays: [{ before: from }, { after: new Date(moment()) }],
           // modifiers,
           // month: from,
           // fromMonth: from,
           numberOfMonths: 1,
           localeUtils: MomentLocaleUtils, locale: "id"
         }}
         inputProps={{
           id: "to-day"
         }}
         // onDayChange={this.handleToChange}
       />
     </span>
  </div>