Has anyone used React-Loki + React-datepicker?

Question

Has anyone tried to use datepicker with react-loki? Getting Cannot read properties of undefined (reading 'type') when I choose a date.

I have tried using both methods from startDate or endDate but getting same error. I am pretty new to this so I am starting to believe that maybe I just can't use these two together?

Any help would be appreciated Thanks!

const [workshopFormData, setWorkshopForm] = useState({
        
        dateStart: new Date(),
        dateEnd: new Date(),

    });
    
const onChange = (values) => {
        setWorkshopForm(values)
        
    };
    
 const wizardSteps = [       
        {
            label: 'Step 0000',
            component: <WizardStep0000 workshopFormData={workshopFormData} onChange={onChange} />,
        },
    ];
    
    
    return (
        <div className="wizard">
            <Loki
                steps={wizardSteps}
                onNext={onChange}
                onBack={onChange}
                onFinish={onFinish}
                nextLabel="Next"
                backLabel="Back"
                noActions
            />
        </div>
    );

const WizardStep0000 = (props) => {    

    const {
        values,        
        errors,
        handleChange,       
        handleSubmit,
        onBack,
        isSubmitting,
        cantBack,
        backLabel,
        nextLabel,
        onFinish,
    } = props;

    
    useEffect(() => {
        onChange();
    }, [values]);    

    const onChange = () => {
        props.onChange(values);
    };

    const onBackClicked = () => {
        onBack(values);
    };



    return (
        <Form onSubmit={handleSubmit} className="p-1">
            <Card className="p-4 mb-4">   
             
                <div className="row">
                    <div className="col-lg-4">                    

                        <DatePicker
                            name="dateStart"
                            id="dateStart"
                            selected={values.dateStart}
                            onChange={handleChange}
                        />
                        
                    </div>
                    <div className="col-lg-4">                       
                        <DatePicker
                            name="dateEnd"
                            id="dateEnd"
                            selected={values.dateEnd}
                            onChange={(date) => handleChange(date)}
                        />                       
                   </div>
                </div>


                <div className="button-group pt-3">
                    <button
                        type="button"
                        className="btn btn-secondary"
                        onClick={onBackClicked}
                        disabled={isSubmitting || cantBack}>
                        {backLabel}
                    </button>
                    <button
                        type="submit"
                        className="btn btn-primary ml-1"
                        disabled={
                            
                            !values.dateStart ||
                            Boolean(errors.dateStart) ||
                            !values.dateEnd ||
                            Boolean(errors.dateEnd)
                        }
                        onClick={onFinish}>
                        {nextLabel}
                    </button>
                </div>
            </Card>
        </Form>

    );
}

WizardStep0000.propTypes = wizardProps.wizardPropTypes;

export default withFormik({
    mapPropsToValues: (props) => ({
        
        dateStart: props.workshopFormData.dateStart,
        dateEnd: props.workshopFormData.dateEnd,
    }),

    handleSubmit: (values, { props }) => {
        props.onNext(values);
    },
})(WizardStep0000);