How to use this with Formik and Yup validation schema?

[PrimozRome]

How do I integrate <SingleDatepicker /> with Formik and Yup validation schema? I just can't update the Formik/Yup date field value when date is selected...

{({ field, value }) => ( Invoice date

What exactly should I supply onDateChange so that Formik/Yup field value is updated? I tried supplying Formik's setFieldValue function, but this accepts 2 parameters fieldName and value.

[aboveyunhai]

https://codesandbox.io/s/intelligent-lena-6s3i0r?file=/src/index.tsx

Take it as an example, Formik Typescript (Strong Typed) is a headache for me so you need to figure out by yourself:

import { Button } from "@chakra-ui/react";
import { SingleDatepicker } from "chakra-dayzed-datepicker";
import { Field, Form, Formik, FormikProps, FieldProps } from "formik";

type FormProps = { "custom-date": Date | undefined };

function App() {
  return (
      <Formik
        initialValues={{ "custom-date": new Date() }}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            console.log(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
        }}
      >
        {({ isSubmitting }: FormikProps<FormProps>) => (
          <Form>
            <Field name={"custom-date"} id={"custom-date"}>
              {({
                field: { value },
                form: { setFieldValue }
              }: FieldProps<Date>) => (
                <SingleDatepicker
                  date={value}
                  onDateChange={(date) => setFieldValue("custom-date", date)}
                />
              )}
            </Field>
            <Button isLoading={isSubmitting} type="submit">
              Submit
            </Button>
          </Form>
        )}
      </Formik>
  );
}

[aboveyunhai]

@PrimozRome This is actually a Formik Custom Component question, in case you want to do more stuffs on your side. You can search them around based on the keyword.

[PrimozRome]

@aboveyunhai very much appreciated!