ReactJS | OnSubmit не является функцией Formik

У меня есть простая форма Form с React. Я использую formik для проверки формы на frontEnd. Вот моя составляющая:

class GroupDetailsForm extends React.Component {
  handleSubmit = values => {
    const { onSubmit } = this.props;
    onSubmit(values);
  };

  render() {
    const { group } = this.props;

    return (
      <Formik
        initialValues = {{ ...group }}
        onSubmit = {this.handleSubmit}
        validationSchema = {validationSchema}
        render = {({ values, touched, errors, handleChangeEvent, handleBlur, handleSubmit }) => (
          <form onSubmit = {handleSubmit}>
            <div className = "row">
              <div className = "col-md-3">
                <div className = "form-group">
                  <label htmlFor = "groupName">
                    Group name <span className = "text-danger">*</span>
                  </label>
                  <input
                    type = "text"
                    onChange = {handleChangeEvent}
                    onBlur = {handleBlur}
                    value = {values.name}
                    name = "name"
                    className = {classNames('form-control', {
                      'is-invalid': errors.name && touched.name
                    })}
                    id = "groupName"
                    placeholder = "PaymentsTeam"
                  />
                  {!!errors.name && touched.name && (
                    <div className = "text-danger">{errors.name}</div>
                  )}
                </div>
                <div className = "form-group">
                  <label htmlFor = "groupDescription">Description</label>
                  <textarea
                    onChange = {handleChangeEvent}
                    onBlur = {handleBlur}
                    value = {values.description}
                    name = "description"
                    className = {classNames('form-control', {
                      'is-invalid': errors.description && touched.description
                    })}
                    id = "groupDescription"
                    rows = "3"
                    placeholder = ""
                  />
                  {!!errors.description && touched.description && (
                    <div className = "text-danger">{errors.description}</div>
                  )}
                </div>
                <button type = "submit">Submit</button>
              </div>
            </div>
          </form>
        )}
      />
    );
  }
}

Когда я нажимаю «Отправить», я получаю такую ​​ошибку:

Uncaught (in promise) TypeError: onSubmit is not a function at Object.GroupDetailsForm.values [as onSubmit] (index.jsx:18)

Не уверен, в чем проблема. Может кто поможет? Код мне кажется нормальным. Я пытался поиграть с ним, обращаясь к OnSubmit в разных частях компонента, а не в самой форме, но безуспешно.

Ошибка, наверное, банальная, но я ее не вижу. Может кто поможет ???

Внизу вы можете увидеть Компонент I, реализующий GroupDetailsForm. Это целый компонент, чтобы было проще.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import GroupDetailsForm from '../../components/GroupDetailsForm';
import { Actions } from '../../actions';

// Importing Styles
import './styles.scss';

export class GroupsCreateScreen extends Component {
  static propTypes = {
    listGroups: PropTypes.func.isRequired
  };

  static defaultProps = {
    securityMode: ''
  };

  componentDidMount() {
    const { listGroups } = this.props;
    listGroups();
  }

  render() {
    const group = {
      name: '',
      description: ''
    };

    return (
      <div className = "container mt-5 bg-white p-5">
        <div className = "card">
          <div className = "card-header">
            <h4>Step 1</h4>
          </div>
          <div className = "card-body">
            <GroupDetailsForm group = {group} />
          </div>
        </div>
        <div className = "card">
          <div className = "card-header">
            <h4>Step 2</h4>
          </div>
        </div>
        <div className = "card">
          <div className = "card-header">
            <h4>Step 3</h4>
          </div>
        </div>
        <div className = "card">
          <div className = "card-header">
            <h4>Step 4</h4>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  ...state // todo to be refined
});

const mapDispatchToProps = {
  ...Actions
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(GroupsCreateScreen);