I have the following data where useRef contains following information.

Data

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

The above is coming from the children within the useRef() as follows.

const formRef = useRef();
// other logic

// above Data
const aboveData = formRef.current.children;

Is there a way I can append to children to hold overallInfo block as follows?

{
    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: ''
    }
}

UPDATE:

This is the form

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 is not coming from anywhere. I am purposely wrapping those 3 keys again cos client needs it to come in that format when I post.

This is how I am posting it. currently which is wrong cos I am not wrapping it inside 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();
};

SOLUTION SUGGESTION BELOW:

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();
};