Formik's handleChange throws "TypeError: null is not an object (evaluating '_a.type')" on DateInput's onChange

Question

When I just add the handleChange from Formik to the "semantic-ui-calendar-react" DateInput component I get the following error on selection a date.

https://i.sstatic.net/l56hP.jpg "console output"

AddWishlistFormDate.tsx

 import { FormikErrors, FormikProps, withFormik } from 'formik';
 import * as React from 'react';
 import { DateInput } from 'semantic-ui-calendar-react';
 import { Button, Form } from 'semantic-ui-react';

 export interface FormValues {
  date: string;
}

 interface Props {
  submit: (values: FormValues) => Promise<FormikErrors<FormValues> | null>;
}

 class C extends React.PureComponent<FormikProps<FormValues> & Props> {
  public render() {
    const {
      values: { date },
      handleChange,
      handleSubmit,
    } = this.props;
    return (
      <Form onSubmit={handleSubmit}>
        <Form.Field>
          <label>Date</label>
          <DateInput
            name="date"
            value={date}
            iconPosition="left"
            onChange={handleChange}
          />
        </Form.Field>
        <Button type="submit">Add</Button>
      </Form>
    );
  }
}

 export const AddWishlistFormDate = withFormik<Props, FormValues>({
  mapPropsToValues: () => ({ date: '' }),
  handleSubmit: async (values, { props, setErrors }) => {
    const errors = await props.submit(values);
    if (errors) {
      setErrors(errors);
    }
  },
})(C);

run it with following

 const handleSubmit = async (values: FormValues) => {
    console.log(values);
    return null;
  };
  return <AddWishlistFormDate submit={handleSubmit} />;

Answer 1

You would do it like this

          <DateInput
            name="date"
            value={date}
            iconPosition="left"
            onChange={(_, {value}) => setFieldValue('date', value)}
          />