I'm trying to write a simple todo App and The problem is that i got 'invalid data' in the datepicker input and datepicker return 'null' in object. I guess, the main issue in the datepicker, but don't know what exactly should i look for.

    const [addTodo] = useMutation(ADD_TODO)
    const onSubmit = e => {
        e.preventDefault();
        addTodo({
            variables:{
                title:todo.title,
                detail:todo.detail,
                date:todo.date,
            }, refetchQueries: [
                { query: GET_TODOS }
            ]
        })
    }

            <DatePicker
                onSubmit={onSubmit}
                id="date"
                value={moment(todo.date)}
                onChange={e => setTodo ({...todo, date: e.target.value})}
                dateFormat="dd MM yyyy"
                className={'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'}
                showDisabledMonthNavigation
            />