onChange in Controller of react-hook-forms not updating date field in formFiledArray?

Question

I have a rather complex set up using react-hook-forms using formFieldArray and react-datepicker. The form allows a user to select a drop down item and a range of dates and then add one or many to the form itself before submit. I'm using formFieldArray to set the initial 'inner form' and then iterating over fields to render the input of the dropdown item and date range. I'm unable to see the values of dates in the created range or update it if the user wants to edit. I'm following the docs on how to do this and was under the impression that I didn't need to use useState to accomplish this. Here's the code:

In my Form.tsx:

....relavent code

type FormProps = {
  subscription: Subscription[]
  seatAmount: string
  seatCount: string
  threePs: string | null
  adminDashboard: string | null
  teamSearch: string | null
}


const CustomerSubscription = () => {
  const {
    control,
    reset,
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormProps>()
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'subscriptions',
  })
  const [selectedDate, setSelectedDate] = useState(null)
  const onSubmit = (data: any) => {
    console.log(data)
  }

  console.log(fields)
  return (
    <SubscriptionContainer>
      <form onSubmit={handleSubmit(onSubmit)}>
        <FormHeader reset={reset} title="Subscription Information" /> // custom header component

        <FormContent>
          
          <FormRow>
            <Label
              htmlFor="WhilContentSubscription"
              label="Whil Content Subscription:"
            />
            <AddSubscription onAdd={append} />
            <ContentSubscriptionWrapper>
              {fields.map((f: any, index: number) => (
                <div key={f.id}>
                  <button type="button" onClick={() => remove(index)}>
                    X
                  </button>
                  <SubscriptionLink>{f.package.name}</SubscriptionLink>
                  <Controller
                    control={control}
                    // @ts-ignore
                    name="startDate"
                    render={({ field }) => (
                      <DatePicker
                        placeholderText="Select date"
                        onChange={(date: Date) => field.onChange(date)}
                        selected={f.startDate}
                      />
                    )}
                  />
                </div>
              ))}
            </ContentSubscriptionWrapper>
          </FormRow>
          
         
        </FormContent>
      </form>
    </SubscriptionContainer>
  )
}

export default CustomerSubscription

and the AddSubscription.tsx component:

type Package = {
  value: string
  label: string
}

export type Subscription = {
  startDate: Date | null
  endDate: Date | null
  package: Package | null
}

type AddSubscriptionProps = {
  onAdd: (subscription: Subscription) => void
}
const packages = [
  { label: 'Package 1', value: 'Package 1' },
  { label: 'Package 2', value: 'Package 2' },
  { label: 'Package 3', value: 'Package 3' },
  { label: 'Package 4', value: 'Package 4' },
  { label: 'Package 5', value: 'Package 5' },
]

const AddSubscription = ({ onAdd }: AddSubscriptionProps) => {
  const {
    control,
    reset,
    handleSubmit,
    formState: { errors },
  } = useForm<Subscription>({
    defaultValues: {
      startDate: null,
      endDate: null,
      package: { label: '', value: '' },
    },
  })

  const clear = () => reset()

  const add = handleSubmit((subscription: Subscription) => {
    onAdd(subscription)
    clear()
  })

  return (
    <>
      <Controller
        control={control}
        name="startDate"
        render={({ field }) => (
          <DatePicker
            placeholderText="Select date"
            onChange={(date: Date) => field.onChange(date)}
            selected={field.value}
          />
        )}
      />
      <Controller
        name="package"
        control={control}
        render={({ field }) => (
          <ReactSelect {...field} isClearable options={packages} />
        )}
      />
      <Button onClick={clear} text="Clear" type="button" /> // custom button
      <Button prop="submit" onClick={add} text="Add" type="submit" /> // custom button
    </>
  )
}

export default AddSubscription