formikのhandleSubmitが実行されない

Reactのformikを使っていたのですが、
エラーメッセージの表示とhandleChangeがうまく動いているのに、
handleSubmitだけ処理が行われません。

react
1import React, { useState } from "react";
2import { Formik } from "formik";
3//styles
4import {
5    TextDiv,
6    FormAndButton,
7    InFormikContainer
8} from "./create-text-form.styles";
9//components
10import FormInput from "../../components/form-input/form-input.component";
11import CustomButton from "../custom-button/custom-button.component";
12import ErrorMessagesContainer from "../form-input/error-messages.container";
13
14const CreateTextForm = () => {
15    //入力フォームの表示・非表示
16    const [isDisplay, setIsDisplay] = useState(false);
17    //フォームの表示・非表示
18    const onMouseEnterOrLeave = () => {
19        setIsDisplay(!isDisplay);
20    };
21
22    return (
23        <TextDiv
24            onMouseEnter={onMouseEnterOrLeave}
25            onMouseLeave={onMouseEnterOrLeave}
26        >
27            <CustomButton design="createText">Text</CustomButton>
28            {isDisplay ? (
29                <Formik
30                    initialValues={{ text_name: "" }}
31                    validate={values => {
32                        const errors = {};
33                        errors.text_name = new Array();
34                        if (!values.text_name) {
35                            errors.text_name.push(
36                                "作成するtextの名前を入力してください"
37                            );
38                        } else {
39                            if (values.text_name.includes("/")) {
40                                errors.text_name.push(
41                                    "/はtext名に使用できません"
42                                );
43                            }
44                        }
45                        return errors;
46                    }}
47                    onSubmit={(values, { setSubmitting }) => {
48                        console.log("submit");
49                        console.log(values);
50                        setSubmitting(false);
51                    }}
52                >
53                    {({
54                        values,
55                        errors,
56                        handleChange,
57                        handleSubmit,
58                        handleBlur,
59                        isSubmitting
60                    }) => (
61                        <InFormikContainer>
62                            <FormAndButton onSubmit={handleSubmit}>
63                                <FormInput
64                                    type="text"
65                                    name="text_name"
66                                    autoComplete="off"
67                                    value={values.text_name}
68                                    onBlur={handleBlur}
69                                    handleChange={handleChange}
70                                    required
71                                />
72                                <CustomButton
73                                    type="submit"
74                                    design="createFolderSubmit"
75                                >
76                                    作成
77                                </CustomButton>
78                            </FormAndButton>
79
80                            <ErrorMessagesContainer
81                                errorMessage={errors.text_name}
82                            />
83                        </InFormikContainer>
84                    )}
85                </Formik>
86            ) : (
87                ""
88            )}
89        </TextDiv>
90    );
91};
92
93export default CreateTextForm;

react
1import styled from "styled-components";
2
3//Folderボタンと入力フォームをまとめる
4export const TextDiv = styled.div`
5    display: flex;
6    margin-right: 10px;
7    flex-direction: column;
8`;
9
10//FormとButtonをまとめる
11export const FormAndButton = styled.form`
12    display: flex;
13`;
14
15export const InFormikContainer = styled.div`
16    text-align: center;
17`;