handleSubmit не отправляет форму formik

Question

Я создал форму formik для страницы регистрации, но она не отправляет форму, когда я нажимаю кнопку отправки. Кроме того, поскольку я использую форму formik, есть некоторые реквизиты из formik и некоторые реквизиты из моего родительского компонента. мы можем использовать два реквизита из двух разных компонентов в одном компоненте?

компонент регистрации

import React, { useState } from "react";
import { Formik } from "formik";
import TextField from "@material-ui/core/TextField";
import * as Yup from "yup";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";

function Copyright() {
    return (
      <Typography variant="body2" color="textSecondary" align="center">
        <Link color="inherit" href="sad">
          New
        </Link>{" "}
        {new Date().getFullYear()}
        {"."}
      </Typography>
    );
  }

const useStyles = makeStyles(theme => ({
    paper: {
      marginTop: theme.spacing(8),
      display: "flex",
      flexDirection: "column",
      alignItems: "center"
    },
    avatar: {
      margin: theme.spacing(1),
      backgroundColor: theme.palette.secondary.main
    },
    form: {
      width: "100%",
      marginTop: theme.spacing(1)
    },
    submit: {
      margin: theme.spacing(3, 0, 2)
    }
  }));

  const SupFirst = props => {
    const classes = useStyles();
    const [loginError, setLoginError] = useState("");
    const [changed, setChanged] = useState(false);
    const {setSignup, signup, email, setEmail}=props;
    const handleSubmit = async (values, { setSubmitting }) => {
        const {email} =values;
        setEmail(values);
        var body = {
          email: email
        };
        console.log(body);
        const options = {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json"
          },
          body: JSON.stringify(body)
        };
        const url = "http://localhost:8000/api/emailcheck";
        try {
          const response = await fetch(url, options);
          const text = await response.text();
          setSubmitting(false);
          setChanged(false);
          console.log(text);
          if (text === "does not exist") {
            setSignup(true);
          } else if (text === "exists") {
            props.history.push(`/`);

          } else {
            setLoginError("Email is invalid");
          }
        } catch (error) {
          console.error(error);
        }
      };
return (
    <Formik
      initialValues={{email:""}}
      onSubmit={handleSubmit}
      //********Using Yup for validation********/

      validationSchema={Yup.object().shape({
        email: Yup.string()
          .email()
          .required("Required"),
      })}
    >
      {props => {
        const {
          values,
          touched,
          errors,
          isSubmitting,
          handleChange,
          handleBlur,
          handleSubmit
        } = props;
        return (
          <>
            <Container component="main" maxWidth="xs">
              <CssBaseline />
              <div className={classes.paper}>
                <Avatar className={classes.avatar}>
                  <LockOutlinedIcon />
                </Avatar>
                <Typography component="h1" variant="h5">
                  Sign in
                </Typography>
                <form
                  className={classes.form}
                  onSubmit={handleSubmit}
                  noValidate
                >
                  <TextField
                    variant="outlined"
                    margin="normal"
                    required
                    fullWidth
                    id="email"
                    value={values.email}
                    label="Email Address"
                    name="email"
                    autoComplete="email"
                    onChange={e=>{setChanged(true);handleChange(e)}}
                    onBlur={handleBlur}
                    className={errors.email && touched.email && "error"}
                  />
                  {errors.email && touched.email && (
                    <div className="input-feedback" style={{ color: "red" }}>{errors.email}</div>
                  )}
{!changed && loginError && (
                    <div style={{ color: "red" }}>
                      <span>{loginError}</span>
                    </div>
                  )}

                  <Button
                    type="submit"
                    fullWidth
                    variant="contained"
                    color="primary"
                    className={classes.submit}
                    disabled={isSubmitting}
                  >
            Next
          </Button>
          <Grid container justify="flex-end">
            <Grid item>
              <Link href="/" variant="body2">
                Already have an account? Sign in
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={5}>
        <Copyright />
      </Box>
    </Container>
          </>
        );
      }}
    </Formik>
  );
};

export default SupFirst;