How to modify children to wrap them inside another key

I have the following form.

const MyForm = ({
  myFormRef,
}) => (
  <form id="myForm" ref={myFormRef} method="POST">
    <input name="test_token" type="hidden" />
    <input name="id" type="hidden" />
    <input name="versionId" type="hidden" />
    <input name="additionalId" type="hidden" />
  </form>
);

export default MyForm;

Information from above form is captured here within another component.

[...myFormRef.current.children].forEach((child) => {
    // child.name is 'test_token'
    // child.value is 'some_token'
});

Thus children here is the above data.

children is

{
    test_token: 'some_token',
    id: 'some_id',
    versionId: 'some_version',
    additionalId: 'some_additional_id'
}

I want to modify children to become

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

Is it possible to do that?

Closest I found was appendChild() but that is to append a node.