reactjs - react-dates DateRangePicker と formik の統合に成功した人はいますか?

Question

react-dates[DateRangePicker] onDatesChange と onFocusChange にはそれぞれ 2 つの値があるため、それらの処理方法について混乱しています。 onDatesChangeは、複数の値、つまり開始日と終了日の両方を設定できる必要があります。

formikでdaterangepickerのカスタムラッパーを構築しようとしていました。

コンソールでエラーを確認する

`<div className="form-group">
    <label>DatePickerWithFormik</label>
    <Field component={DatePickerWithFormik} name="DatePickerWithFormik" 
    className="form-control" />
</div>`

`export const DatePickerWithFormik = ({ startDateId, endDateId, form: { setFieldValue, setFieldTouched }, field, ...props }) => {
    const [focused, setFocused] = useState(null); // this will be removed
    return(
        <div>
            {/* {console.log('Inside datpicer', field.name)} */}
            <DateRangePicker 
                {...props}
                startDateId="startDateId"
                endDateId="endDateId"
                onDatesChange={(value) => 
                field.onChange(setFieldValue(field.name, value) )}
                onFocusChange={focused => setFocused(focused)}
                focusedInput={focused}
                startDate={field.startDate}
                endDate={field.endDate}
            />
            {/* {console.log(field)} */}
        </div>
    );
};
`

1. 期待される結果: 開始日と終了日の両方をローカル状態で保存し、画面に表示できる必要があります。

作業リンクを参照してください: https://codesandbox.io/s/l72w6n8l0m