React Datepicker with react-hook-form Controller outputting undefined on form submit. Starting value passed from props

Question

I am using react-datepicker inside react-hook-form's Controller. I passed the starting date from props to my form component, then I use useState to store that prop value in the component state. The type of the variable seems to be a date object, but I can't figure out why using it as the selected value on Datepicker is causing the value to return undefined when I submit a form. I am not doing any clicking on Datepicker. This undefined issue occurs on submitting the form with its initial value. If I change the value on it and submit the form, it returns the date object as expected. I want it to return a value if the user does not make any change. It should submit with that initial value provided, not undefined.

I have two date entries. The End Date component works if I do not provide a start value for it. I have cut out other parts of the form that are irrelevant to this issue.

I am using react-hook-form v 7.29.0, react-datepicker v 4.7.0, and react v 18.0. This most recent version of datepicker apparently doesn't use moment anymore but just built-in date methods, so I'm not sure what is wrong with my starting date object provided. Can someone please provide some guidance/understanding to what is causing it to return undefined?

Thanks, Code below:

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>
  );
}