Input has value but got undefined or empty string on submit using react hook form

Question

I have nested form, one is on the parent and one is inside of a table component (using PrimeReact), and i have problem getting the value from the input inside of the table.

I got the data for the table from API, pass to every columns, put it inside on an <input> and it shows the value correctly, but when i try submit it, the value is undefined (for every <input> that has value from data) and empty string (for every input that i filled independently), but the data structure is correct, like this:

{
"parent1": "i got the value",
"parent2": "i got the value", 
"data": [{
"tableChild1": [undefined, undefined...], 
"tableChild2": ['','',..],
}]
} 

---

and my code look like this:

Parent.js

   const methods = useForm({
      mode: 'onChange',
   })

   const {
      control,
      register,
      handleSubmit,
      setError,
      formState: { isSubmitting },
   } = methods

     <FormProvider {...methods}>
        <form className="" onSubmit={onSubmit}>
           <div>
              // input parent
           </div>
           <div>
              <ChildTable
                 control={control}
                 loading={loading}
                 data={formPreload}
                 {...createFormTableOptions()}
              />
           </div>
           <div className="full-grid  ">
              // submit button
           </div>
        </form>
     </FormProvider>

ChildTable.js

const { register } = useFormContext()
   const { fields, append, remove } = useFieldArray({
      control,
      name: 'data',
   })

const elColumns = columns.map((col, i) => {
      return (
         <Column
            key={i}
            field={col.field}
            body={(row, props) => {
               return (
                  <>
                     <InputText
                        {...register(
                           `data.${col.name}[${props.rowIndex}]` ?? ''
                        )}
                        disabled={col.isReadOnly}
                        type="text"
                        id={col.name}
                        name={`data[${i}][${col.name}]`}
                        value={row[col.field ?? '']}
                     />
                     {}
                  </>
               )
            }}
            className={col.className}
            header={col.header}
            style={col.style}
         />
      )
   })

I have followed the instruction on the documention using useFormContext, useFieldArray, and useForm but i stil have no clue what's wrong. Thank you for your help.