reactjs - TypeError: Cannot destructure property 'name' of 'e.target' as it is undefined. with DatePicker in React Hooks

Question

I will be grateful for any help. Unable to assign value from DatePicker field. All other input fields work fine. Why can't I assign a value to a variable in a DatePicker field?

import React, { useState } from 'react';
import useForm from './useForm';
import validate from './validateInfo';
import './Form.css';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const FormInput = ({ submitForm }) => {
    const { handleChange, values, handleSubmit, errors } = useForm(submitForm, validate);
    console.log(values);
    const [date, setDate] = useState(new Date());
    console.log(date)

    return (
        <div className="form-content-right">
            <form className="form" onSubmit={handleSubmit}>
                <h1>Neuen Fehler eingeben.
                </h1>
                <div className="form-inputs">
                    <div>
                        <label htmlFor="startDate"
                            className="form-label">
                            Datum
                    </label>
                            <DatePicker
                                id="startDate"
                                type="date"
                                name="startDate"
                                className="form-input"
                                value={date.toString()}
                                onChange={handleChange}
                            />
                    </div>

                  // ... some other input fields...
               
                <button className="form-input-btn"
                    type='submit'>
                    eingeben
                </button>
            </form>
        </div>
    )
}

export default FormInput;

question from:https://stackoverflow.com/questions/65889623/typeerror-cannot-destructure-property-name-of-e-target-as-it-is-undefined

Answer 1

The onChange callback of the react-datepicker component seems to return the value directly without the event object.

Can you try something like that:

<DatePicker
  id="startDate"
  type="date"
  name="startDate"
  className="form-input"
  value={date.toString()}
  onChange={date => handleChange({ target: { value: date, name: 'startDate' } })}
/>