Невозможно прочитать свойство «отправить» неопределенного - React

Я создаю форму мастера с помощью реакции-окончательной формы. Когда я нажимаю кнопку, я получаю эту ошибку:

Я не понимаю, почему появляется такое сообщение. Это мой компонент Wizard.

import { Form as FinalForm } from 'react-final-form'; 
import { Button, Form, } from 'reactstrap';
    class Wizard extends Component {
      static Page = ({ children }) => children
    
      constructor(props) {
        super(props);
        this.state = {
          page: 0,
          values: props.initialValues || {},
        };
      }
    
      next = (values) => {
        const { children } = this.props;
        this.setState((state) => ({
          page: Math.min(state.page + 1, React.Children.toArray(children).length - 1),
          values,
        }));
        console.log('ha');
      }
    
      previous = () => {
        this.setState((state) => ({
          page: Math.max(state.page - 1, 0),
        }));
      }
    
      validate = (values) => {
        const { children } = this.props;
        const { page } = this.state;
        const activePage = React.Children.toArray(children)[
          page
        ];
        return activePage.props.validate ? activePage.props.validate(values) : {};
      }
    
      handleSubmit = (values) => {
        const { children, onSubmit } = this.props;
        const { page } = this.state;
        const isLastPage = page === React.Children.count(children) - 1;
        if (isLastPage) {
          onSubmit(values);
        } else {
          this.next(values);
        }
        console.log(children);
        console.log(React.Children.toArray(children));
        console.log('hao');
      }
    
      render() {
        const { children } = this.props;
        const { page, values } = this.state;
        const activePage = React.Children.toArray(children)[page];
        const isLastPage = page === React.Children.count(children) - 1;
        return (
          <FinalForm
            initialValues={values}
            validate={this.validate}
            onSubmit={this.handleSubmit}
          >
            {
              ({
                handleSubmit,
                submitting,
                pristine,
                invalid,
              }) => (
                <Form onSubmit={handleSubmit}>
                  {activePage}
                  <div className="buttons">
                    {page > 0 && (
                      <Button type="button" onClick={this.previous}>
                        « Previous
                      </Button>
                    )}
                    {!isLastPage && <Button color="success" type="submit">Next »</Button>}
                    {isLastPage && (
                      <Button color="success" type="submit" disabled={submitting || pristine || invalid}>
                        Submit
                      </Button>
                    )}
                  </div>
                </Form>
              )
            }
          </FinalForm>
        );
      }
    }

Когда я нажимаю кнопку, функция handleSubmit, вероятно, не срабатывает, потому что console.log не отображается. Может кто знает почему появляется такое сообщение? Спасибо за помощь заранее.