I get how to use react-hook-form's Controller in creating an input.

import styles from './index.module.css'
import { Controller } from 'react-hook-form'

export default function InputField({
  label,
  placeholder,
  type,
  value,
  inputId,
  control,
  name,
  ...props
}) {
  return (
    <div className={styles.field}>
      <label htmlFor={inputId} className={styles.label}>{label}</label>
      <Controller
        name={name}
        control={control}
        render={({ field }) => <input id={inputId} {...field} className={styles.input} placeholder={placeholder} />}
      />
    </div>
  )
}

However, how do you create a "date field", which has a select box for the month, the day, and the year? In theory, we want to have the form spit out a JSON date object, which looks like this:

JSON.stringify(new Date)
'"2021-11-04T06:47:07.567Z"'

So we want the handleSubmit to receive { "aDateField": "2021-11-04T06:47:07.567Z" } sort of thing. But the implementation of the Controller is 3 select boxes, which may be named something like aDateField[month], aDateField[day], and aDateField[year] or may not have any names themselves, as they are not used in the final JSON output. How do you do this with react-hook-form?

The architecture of the HTML will really be 2 select boxes and an input (for the year, so you don't have to scroll through potentially thousands of years, going back to 2000 BCE).

<select>
  <option>Month...</option>
  <option value="0">January</option>
  <option value="1">February</option>
  ...
</select>
<select>
  <option>Day...</option>
  <option value="0">1</option>
  <option value="1">2</option>
  ...
</select>
<input name="year" />

I am confused as to how to properly serialize the sub-inputs into a final output JSON value, following the Control react-hook-form paradigm.

To keep it simple, you could just as well use 3 text inputs for the values instead of select boxes for now.