Tengo los siguientes datos donde useRef contiene la siguiente información.

Datos

 { token: '', id: '', versionId: '', additionalId: '' }

Lo anterior proviene de los niños dentro de useRef() de la siguiente manera.

 const formRef = useRef(); // other logic // above Data const aboveData = formRef.current.children;

¿Hay alguna manera de que pueda agregar a children para mantener overallInfo de información general de la siguiente manera?

 { token: '', // these 3 no longer needed but can remain if no way to delete id: '', versionId: '', additionalId: '', // I want to add this additional block overallInfo: { id: '', versionId: '', additionalId: '' } }

ACTUALIZAR:

esta es la forma

 const Form = ({ formRef, }) => ( <form id="form" ref={formRef} method="POST"> <input name="token" type="hidden" /> <input name="id" type="hidden" /> <input name="versionId" type="hidden" /> <input name="additionalId" type="hidden" /> </form> ); export default Form;

OverallInfo no proviene de ninguna parte. Estoy envolviendo deliberadamente esas 3 claves porque el cliente necesita que venga en ese formato cuando publique.

Así lo estoy publicando. actualmente, lo cual es incorrecto porque no lo envuelvo dentro de OverallInfo.

 export const PostForm = ( formRef, link, ) => { // formRef.current.children definitely has all the token, // id, versionId and additionalId values at this stage formRef.current.action = link; formRef.current.submit(); };

SUGERENCIA DE SOLUCIÓN A CONTINUACIÓN:

 export const PostForm = ( formRef, link, ) => { const updatedRequest = { overallInfo: {}, }; [...formRef.current.children].forEach((child) => { updatedRequest.overallInfo[child.name] = child.value; }); const newRef = useRef(updatedRequest); newRef.current.action = link; newRef.current.submit(); };