How to apply Formik and Yup validation and form submission on Date Range Picker?

[thealiraza]

I am using Date Range Picker from Material-UI-pickers in a form and using Formik for form and Yup for validation. But, the problem is that I can't find a way to submit DateRangePicker values through Formik. Validation through Yup is working fine. I am using React Hooks. DateRangePicker creates dates but I can't pass values in form submission.

I will be grateful for your help.

import React, {useState} from 'react';
import { Formik, Form, Field  } from 'formik'
import * as Yup from 'yup'
import { LocalizationProvider, DateRangeDelimiter, DateRangePicker, DatePicker } from '@material-ui/pickers';
import TextField from '@material-ui/core/TextField';
import DateFnsAdapter from '@material-ui/pickers/adapter/date-fns';

const initialValues = {
    eventStartDate: '',
    eventEndDate: ''
}

const validationSchema = Yup.object().shape({
    eventStartDate: Yup.string().required().label('Event Start Date'),
    eventEndDate: Yup.string().required().label('Event End Date'),
});


const EventDetails = () => {
    const [value, setValue] = React.useState([null, null]);
    return (
        <Formik
            initialValues={initialValues}
            onSubmit={(values) => {
                console.log(values);
            }}
            validationSchema={validationSchema}
        >{({handleChange, values, errors }) => (
            <form>  
                    <LocalizationProvider dateAdapter={DateFnsAdapter}>
                    <DateRangePicker
                    startText="Registration Start Date"
                    endText="Registration End Date"
                    value={value}
onChange={(value) => setValue(value)}
                    renderInput={(startProps, endProps) => (
                        <React.Fragment>
                            <TextField {...startProps} />
                            <DateRangeDelimiter> to </DateRangeDelimiter>
                            <TextField {...endProps} />
                        </React.Fragment>
                    )}
                    name='eventDates'
                />
                {errors.eventDates ? <span className={classes.error}>{errors.eventDates}</span> : <div className={classes.err}></div>}
                </LocalizationProvider>
                </form>
                )}
        </Formik>
    )
}

export default EventDetails;