SignIn.tsx

import { Formik } from "formik";
import React from "react";
import * as yup from "yup";

type SignInForm = {
  email: string;
  password: string;
};

type SignInProps = {
  onSubmit: ({ email, password }: SignInForm) => void;
  Form: React.ElementType;
  validationSchema: yup.ObjectSchema<
    yup.Shape<
      object,
      {
        email: string;
        password: string;
      }
    >
  >;
};

export default ({ onSubmit, Form, validationSchema }: SignInProps) => {
  return (
    <Formik
      initialValues={{ email: "", password: "" }}
      validationSchema={validationSchema}
      onSubmit={values => {
        const { email, password } = values;
        onSubmit({ email, password });
      }}
    >
      {({ handleChange, handleBlur, handleSubmit, values }) => {
        return (
          <Form
            handleChange={handleChange}
            handleBlur={handleBlur}
            handleSubmit={handleSubmit}
            values={values}
          />
        );
      }}
    </Formik>
  );
};