Quería ingresar la palabra Product , pero cuando la envío, no aparece en la consola.

Lo que aparece en la consola:

Como puede ver aquí, la palabra Product no aparece en la consola. ¿Alguna idea de cómo puedo solucionar esto?

Este es el enlace de codesandbox: https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-forked-vjwbp?file=/src/index.js

este es el fieldArray.js donde están los campos de entrada para los productos

 import React from "react"; import { useFieldArray } from "react-hook-form"; import NestedArray from "./nestedFieldArray"; import { TextField } from "@mui/material"; let renderCount = 0; export default function Fields({ control, register, setValue, getValues }) { const { fields, append, remove, prepends } = useFieldArray({ control, name: "test" }); renderCount++; return ( <> <ul> {fields.map((item, index) => { return ( <li key={item.id}> {/* <select ref={register()} name={`test[${index}].name`} defaultValue={item.name} > <option value="">Select</option> <option value="10">ItemA</option> <option value="20">ItemB</option> </select> */} {/* {index + 1} to show the qty */} <TextField name={`test[${index}].name`} refer={register()} defaultValue={item.name} /> <button type="button" onClick={() => remove(index)}> Delete </button> <NestedArray nestIndex={index} {...{ control, register }} /> </li> ); })} </ul> <section> <button type="button" onClick={() => { append({ name: "append" }); }} > Add product </button> </section> <span className="counter">Render Count: {renderCount}</span> </> ); }