如何使用Formik在ReactJS中实现单选按钮

Question

在我的注册表中，单选按钮不起作用，当我按下创建按钮时，什么也没发生，它不会激活onSubmit功能，但是如果我将其删除，则会被激活。

这是我的代码：

import React from "react";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";

const male = props => (
  <input type="radio" value="male" name="gender" {...props} />
);

const female = props => (
  <input type="radio" value="female" name="gender" {...props} />
);

export class RegisterPage extends React.Component {
  render() {
    let { initialValues } = this.state;
    return (
      <div>
        <div>
          <h1>Sign Up</h1>
          <Formik
            initialValues={initialValues}
            onSubmit={(
              { email, password, gender },
              { setStatus, setSubmitting }
            ) => {
              setStatus();
              authenticationservice.newuser({ email, password, gender }).then(
                user => {
                  const { from } = this.props.location.state || { from: { pathname: "/" }      `};`
                  this.props.history.push(from);
                },
                error => {
                  setSubmitting(false);
                  setStatus(error);
                }
              );
            }}
            render={({ errors, status, touched, isSubmitting }) => (
              <Form>
                <div>
                  <label htmlFor="email">Email Address</label>
                  <Field name="email" type="text" />
                  <ErrorMessage name="email" component="div" />
                </div>
                <div>
                  <label htmlFor="gender">Gender</label>
                  <label>Male</label>
                  <Field name="gender" as={male} />
                  <label>Female</label>
                  <Field name="gender" as={female} />
                </div>
                <div>
                  <button type="submit" disabled={isSubmitting}>
                    Create
                  </button>
                  {isSubmitting && <img alt="" src="data:image" />}
                </div>
                {status && <div>{status}</div>}
              </Form>
            )}
          />
        </div>
      </div>
    );
  }
}

我不确定会发生什么，因为我没有任何错误代码，什么也没发生