formik simple form but the lane is too much

LoginForm.tsx

import React, { Fragment, FunctionComponent } from "react";
import {
  Formik,
  Form,
  Field,
  ErrorMessage,
  FormikProps,
  FormikErrors,
  FormikActions,
  FieldProps
} from "formik";
import { TextField, TextFieldIcon, TextFieldHelperText } from "@rmwc/textfield";
import { Typography } from "@rmwc/typography";
import { useToggle } from "react-use";
import { Button, ButtonIcon } from "@rmwc/button";
import useReactRouter from "use-react-router";
import { CircularProgress } from "@rmwc/circular-progress";
import "@rmwc/circular-progress/circular-progress.css";
import {
  FlexBoxColumn,
  FlexBoxRow,
  FlexDivColumn
} from "../components/FlexBox";
interface MyFormValues {
  email: string;
  password: string;
}

const LoginForm: FunctionComponent<{}> = () => {
  const [on, toggle] = useToggle(true);
  const { history } = useReactRouter();
  return (
    <FlexBoxColumn>
      <Typography use="headline3">Sign In</Typography>
      <Formik
        initialValues={{ email: "", password: "" }}
        validate={values => {
          const errors: FormikErrors<MyFormValues> = {};
          if (!values.email) {
            errors.email = "Email Required";
          } else if (
            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
          ) {
            errors.email = "Invalid email address";
          }
          if (!values.password) {
            errors.password = "Password Required";
          }
          return errors;
        }}
        onSubmit={(
          values: MyFormValues,
          FormikActions: FormikActions<MyFormValues>
        ) => {
          setTimeout(() => {
            alert(JSON.stringify(values));
            FormikActions.setSubmitting(false);
          }, 400);
        }}
        render={(formikBag: FormikProps<MyFormValues>) => (
          <Form>
            <FlexBoxColumn>
              <Field
                name="email"
                render={({ field, form }: FieldProps<MyFormValues>) => (
                  <FlexDivColumn>
                    <TextField
                      outlined
                      label="email"
                      type="text"
                      {...field}
                      invalid={!(form.errors.email == undefined)}
                    />
                    <ErrorMessage
                      name="email"
                      render={msg => (
                        <TextFieldHelperText persistent validationMsg>
                          {msg}
                        </TextFieldHelperText>
                      )}
                    />
                  </FlexDivColumn>
                )}
              />
              <Field
                name="password"
                render={({ field, form }: FieldProps<MyFormValues>) => (
                  <FlexDivColumn>
                    <TextField
                      outlined
                      label="password"
                      type={on ? "password" : "text"}
                      {...field}
                      invalid={!(form.errors.password == undefined)}
                      withTrailingIcon={
                        <TextFieldIcon
                          tabIndex={0}
                          icon={on ? "visibility" : "visibility_off"}
                          onClick={() => toggle()}
                        />
                      }
                    />
                    <ErrorMessage
                      name="password"
                      render={msg => (
                        <TextFieldHelperText persistent validationMsg>
                          {msg}
                        </TextFieldHelperText>
                      )}
                    />
                  </FlexDivColumn>
                )}
              />
              <Button raised type="submit" disabled={formikBag.isSubmitting}>
                {!formikBag.isSubmitting ? (
                  "Login"
                ) : (
                  <ButtonIcon icon={<CircularProgress />} />
                )}
              </Button>
            </FlexBoxColumn>
          </Form>
        )}
      />
      <Button raised>Login With Facebook</Button>
      <FlexBoxRow>
        <Button onClick={() => history.push("/signup")}>
          Create New Account
        </Button>
        <Button>Forgot Password?</Button>
      </FlexBoxRow>
    </FlexBoxColumn>
  );
};

export default LoginForm;