How to override react hook form so that a value always has an id

I am working on a CMS that supports the export functionality. For most of the fields we can’t store only the value, we have to store an id with it, therefore the structure has to be like this

  task: {
    name: {
      id: <uuid>
      value: "Task 1"
    },
  }

This can be done quite easily by levering getValues and setValue functions.

Let’s say I create my custom FormInput to handle this and I use like this

<FormInput label="Task name" name='task.name.value' />

And then, on update that field, if its parent is not an object with an id then I just set it

export const FormInput = ({name}) => {
  const { register, getValues, setValue } = useForm()

  React.useEffect(() => {
    const value = getValues(name)

    if (!value) {
      const parent = name.slice(0, name.lastIndexOf(".value"))
      setValue(path, {
        id: uuidv4()
        value: // <----- here I need to get the html ref initial value based on type of the input
      })
    }
  }, [])

  return (
      <TextField fullWidth={true} {...register(name)}  />
  )
}

However the problem is that like this I override the default value. If the FormInput is of type number, and it is empty, untouched, on submit I will get NaN so I need to preserve that functionality