React-hook-form: using useFieldArray and want to use onChange to set a value

Created on 26 Feb 2020 · 1Comment · Source: react-hook-form/react-hook-form

I'm using useFieldArray to render 'payment' fields and one of the fields required is a 'DatePicker'. I can't figure out how to set the value of DatePicker. I can't assign name or register to it because the DatePIcker isn't rendered to the page as an input. I've tried to set the field by passing a function to the DatePicker's onChange prop called 'setPaymentDate':

  function setPaymentDate(fieldIndex: number, unixDate: number) {
    const values: any = getValues({nest: true});
    values.payments[index].payDate = unixDate;
    reset(values);
  }

  <span className='cursor-pointer'>
    <input name={name('payDate')}
                type='hidden'
                ref={register({ required: 'Payment date is required.' })} />
    <DatePicker selected={payment.payDate}
                          onChange={(momentObj: any) =>
                            setPaymentDate(momentObj.unix())}
     />
  </span>

This function does set the date of the DatePicker but it also clears all the other field values at the same time (I made sure to pass the field.id as the key attribute).

Screen Shot 2020-02-26 at 10 31 43 pm