реагировать-датуФункция onFocusChange неверное предупреждение о проп

Question

Получение этой ошибки при нажатии на входные данные начальной и конечной даты:

Warning: Failed prop type: Invalid prop `focusedInput` of value `[object Object]` supplied to `withStyles(DateRangePicker)`, expected one of ["startDate","endDate"].

Вот что я пробовал:

Создан компонент оболочки для пакета реагирующих дат:

const ReactDatesWrapper = (props) => {

    if (props.pickerType === 'single') {
        return (
            <div className={styles.wrapper}>
                <SingleDatePicker
                    displayFormat={() => "DD/MM/YYYY"}
                    date={props.singleDate}
                    onDateChange={props.onDateChange}
                    focused={props.focused}
                    onFocusChange={props.onFocusChange}
                    id={props.uniqueId}
                    numberOfMonths={1}
                />
            </div>
        )
    }

    return (
        <div className={styles.wrapper}>
            <DateRangePicker
                displayFormat={() => "DD/MM/YYYY"}
                startDateId={props.startDateId}
                endDateId={props.endDateId}
                startDate={props.startDate}
                endDate={props.endDate}
                onDatesChange={props.onDatesChange}
                focusedInput={props.focusedInput}
                onFocusChange={props.onFocusChange}
                numberOfMonths={1}
            />
        </div>
    )
}

Импортировал это в мой index.js и написал эти две функции и хуки:

const [startDate, setStartDate] = useState(moment());
const [endDate, setEndDate] = useState(moment());
const [focusedInput, setFocusedInput] = useState(null);

const rangeDatesChangeHandler = ({ startDate, endDate }) => {
  setStartDate(moment(startDate));
  setEndDate(moment(endDate));
}

const onFocusChangeRangeHandler = (focusedInput) => {
  setFocusedInput({ focusedInput });
}

Наконец, я использую эти функции в качестве реквизита:

<ReactDatesWrapper
    startDateId="start-date"
    endDateId="end-date"
    onDatesChange={rangeDatesChangeHandler}
    onFocusChange={onFocusChangeRangeHandler}
    focusedInput={focusedInput}
    startDate={startDate}
    endDate={endDate}
    uniqueId="range-picker"
/>

Однако я, кажется, получаю предупреждение и сам календарь, если не выпадаю из входных данных:

Warning: Failed prop type: Invalid prop `focusedInput` of value `[object Object]` supplied to `withStyles(DateRangePicker)`, expected one of ["startDate","endDate"].

У меня есть версия средства выбора даты, которая работает с помощью аналогичных средств, используя следующие функции / функции:

const [date, setDate] = useState(moment());
const [focused, setFocused] = useState(false);

// Single date picker functions

const singleDateChangeHandler = (date) => {
    setDate(moment(date));
}

const onFocusChangeHandler = ({ focused }) => {
    setFocused(focused);
}

<ReactDatesWrapper
    pickerType="single"
    singleDate={date}
    onDateChange={singleDateChangeHandler}
    onFocusChange={onFocusChangeHandler}
    focused={focused}
    uniqueId="single-picker"
/>

Я думаю, что это может быть что-то с крючком

const [focusedInput, setFocusedInput] = useState(null);

и функцией

const onFocusChangeRangeHandler = (focusedInput) => {
   setFocusedInput({ focusedInput });
}

?

Любая помощь сильнооценили.

Ожидаемый результат - возможность изменить даты начала и окончания.

Answer 1

Оказывается, изменение функции onFocusChangeRangeHandler с:

const onFocusChangeRangeHandler = (focusedInput) => {
  setFocusedInput({ focusedInput });
}

на

const onFocusChangeRangeHandler = (focusedInput) => {
    setFocusedInput(focusedInput);
}

решает проблему. проблема была связана с установкой состояния focusInput объекта.