formik react

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import "bootstrap/dist/css/bootstrap.css";
import { useDispatch } from "react-redux";
import { ProjectStore } from "../../store/Project/actions";

const LoginSchema = Yup.object().shape({
  title: Yup.string()
    .min(3, "projectType must be 3 characters at minimum")
    .required("title is required"),
  projectType: Yup.string().required("projectType is required"),
  select: Yup.object().shape({
    label: Yup.string().required(),
    value: Yup.string().required(),
  })
});

export enum ProjectType {
  HORIZONTAL = "HORIZONTAL",
  VERTICAL = "VERTICAL",
  SQUARE = "SQUARE",
}
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

interface StoreModalProps {}
const Store: React.FC<StoreModalProps> = () => {
  const dispatch = useDispatch();
  return (
    <div className="container">
      <div className="row">
        <div className="col-lg-12">
          <Formik
            initialValues={{ title: "", projectType: "", select: [] }}
            validationSchema={LoginSchema}
            onSubmit={async (values, { resetForm }) => {
              console.log(values);
              const store = await dispatch(ProjectStore(values));
              //resetForm();
            }}
          >
            {({ touched, errors, isSubmitting, values, handleChange, setFieldTouched, setFieldValue}) => (
              <div>
                <div className="row mb-5">
                  <div className="col-lg-12 text-center">
                    <h1 className="mt-5">Login Form</h1>
                  </div>
                </div>
                <Form>
                  <div className="form-group">
                    <label htmlFor="title">title</label>
                    <Field
                      type="title"
                      name="title"
                      placeholder="Enter title"
                      autoComplete="off"
                      className={`mt-2 form-control
                          ${
                            touched.title && errors.title
                              ? "is-invalid"
                              : ""
                          }
                          ${touched.title && !errors.title ? 'is-valid' : ''}
                          `}
                    />

                    <ErrorMessage
                      component="div"
                      name="title"
                      className="invalid-feedback"
                    />
                  </div>

                  <div className="form-group">
                    <label htmlFor="projectType" className="mt-3">
                      projectType
                    </label>
                    <Field
                      type="projectType"
                      name="projectType"
                      placeholder="Enter projectType"
                      className={`mt-2 form-control
                          ${
                            touched.projectType && errors.projectType
                              ? "is-invalid"
                              : ""
                          }
                          ${touched.projectType && !errors.projectType ? 'is-valid' : ''}
                          `

                        }
                    />
                    <ErrorMessage
                      component="div"
                      name="projectType"
                      className="invalid-feedback"
                    />
                  </div>
<div className="form-group">
                    <label htmlFor="select" className="mt-3">
                      projectType
                    </label>
                    <Select
                      name="select"
                      options={options}
                      placeholder="Enter projectType"
                      // onChange={handleChange}
                      className={`mt-2 form-control
                          ${
                            touched.select && errors.select
                              ? "is-invalid"
                              : ""
                          }
                          ${touched.select && !errors.select ? 'is-valid' : ''}
                          `

                        }
                        id="state"
                        onBlur={() => setFieldTouched("state", true)}
                        value={values.select}
                          onChange={(opt, e) => {
        console.log('opt', opt);
                          setFieldValue("select", opt);
                        }}
                    />
                    <ErrorMessage
                      component="div"
                      name="select"
                      className="invalid-feedback"
                    />
                  </div>
                  {console.log(errors)}
                  <button
                    type="submit"
                    className="btn btn-primary btn-block mt-4"
                    disabled={Object.keys(errors).length !== 0}
                  >
                    Submit
                  </button>
                </Form>
              </div>
            )}
          </Formik>
        </div>
      </div>
    </div>
  );
};

export default Store;