反应datepicker与形式提交中未定义的反应钩形式控制器输出。起始价值从道具传递

Question

我正在使用React-datepicker内部的反应钩形式的控制器。 我将起始日期从道具转移到我的表单组件，然后使用Usestate将该Prop值存储在组件状态。变量的类型似乎是日期对象，但是我无法弄清楚为什么在我提交表单时将其用作datePicker的选定值会导致值返回未定义的值。 我没有单击datepicker。此不确定的问题发生在提交具有其初始值的表格时。 如果我更改其值并提交表格，它将按预期返回日期对象。 如果用户不进行任何更改，我希望它返回值。它应提交提供的初始值，而不是未定义。

我有两个日期条目。如果我不为其提供启动值，则结束日期组件有效。 我削减了与此问题无关的表格的其他部分。

我正在使用React-Hook-Form V 7.29.0， react-datepicker v 4.7.0， 和React v 18.0。 最新版本的datePicker显然不再使用时刻，而只是内置日期方法，因此我不确定提供的启动日期对象有什么问题。有人可以为导致其返回未定义的原因提供一些指导/理解吗？

谢谢， 下面的代码：

import React, { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import DatePicker from 'react-datepicker';

export default function EmployeeCard(props) {
  const { register, handleSubmit, control } = useForm();
  const employeeStartDateModified =new Date(props.employee.startDate);

  const modifiedProps = {
    ...props.employee,
    startDate: employeeStartDateModified,
  };

  const [employeeData, setInputValues] = useState(modifiedProps);

  let { firstName, middleName, lastName, salary, active, startDate, id, ptoBalance } =
    employeeData;

  const handleOnChange = event => {
    const { name, value } = event.target;
    setInputValues({ ...employeeData, [name]: value });
  };

  // did new state for startDate to see if the object would fix the undefined issue
  const [newStartDate, setNewStartDate] = useState(new Date(startDate));

  const onSubmit = registerData => {
    console.log(registerData); //other components of form show values, except startDate shows undefined. As soon as I change it from its initial value it console logs the date object. Same for endDate, which has no starting value. Entering a value in it and submitting returns the date object. Start date only returns undefined when provided the initial value in selected={}.
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className='centered-container-form'
      key={id}
    >
      <div className='form-group'>
        <label htmlFor='startDate'>Start Date</label>
        <Controller
          control={control}
          name='startDate'
          render={({ field: { value = newStartDate, onChange } }) => (
            <DatePicker
              onChange={date => {
                setNewStartDate(date);
                onChange(newStartDate);
              }}
              selected={value}
              dateFormat='MM/dd/yyyy'
              required
            />
          )}
        />
      </div>
      <div className='form-group'>
        <label htmlFor='endDate'>End Date</label>
        <Controller
          control={control}
          name='endDate'
          render={({ field }) => (
            <DatePicker
              onChange={date => field.onChange(date)}
              selected={field.value}
              dateFormat='MM/dd/yyyy'
            />
          )}
        />
      </div>
      <button type='submit' className='btn btn-outline-primary'>
        Update
      </button>
    </form>
  );
}