DatePicker component incompatible with react-hook-form?

[sidneygijzen]

Describe the bug I'm trying to make use of the DatePicker component with react-hook-form. However I'm running into the following issue: the date input element shows the changed value (e.g 13-08-2022), but on submit it logs the initial value (15-07-2022).

To Reproduce A minimal example to illustrate - based on the react-hook-form quickstart:

import { useForm } from "react-hook-form"
import { Datepicker } from '@amsterdam/asc-ui'

export default function TheForm() {
  const { register, handleSubmit, formState: { errors } } = useForm()
  const onSubmit = data => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Datepicker
        id="theAscDate"
        value="15-07-2022"
        {...register('theAscDate')}
      />
      
      <input type="submit" />
    </form>
  )
}

Expected behavior I would expect the displayed (changed) value to be logged on submit in the example given above.

Desktop (please complete the following information):

• OS: Kubuntu
• Browser: Firefox
• Version: 102.0

Additional context I tried other variations to check whether it might be a react-hook-form, an ASC component or a DatePicker component issue. So far, it appears to be an issue with the DatePicker component, because the variations listed below all work as expected. So, the input element shows the changed value, and the changed value is also logged on submit.

import { useForm } from "react-hook-form"
import { Input } from '@amsterdam/asc-ui'

export default function TheForm() {
  const { register, handleSubmit, formState: { errors } } = useForm()
  const onSubmit = data => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* HTML5 date input based on ASC Input component */}
      <Input
        defaultValue="2022-07-16"
        type="date"
        {...register('theHtmlDate')}
      />

      {/* Plain ASC input */}
      <Input defaultValue="testing asc" {...register('exampleAsc')} />
      
      {/* Plain HTML input */}
      <input defaultValue="testing html" {...register('exampleHtml')} />
      
      <input type="submit" />
    </form>
  )
}

Do you have any idea what I am missing in case of the DatePicker component? Can you point me in right direction?

Thanks!