SVG group to child transforms

I have a group that has 2 or more SVG elements. Group has a SVG matrix applied and the same apply for children.

Each element, including group can have any transformations applied through the matrix (rotate, skew, scale etc). Example of SVG with the group and 2 inner elements:

<g transform="matrix(0.679039, -0.734102, 0.734102, 0.679039, -21.7964, 262.861)">
    <path transform="matrix(1, 0, 1.63636, 1, 82.9909, 49.1)" d="M92.35,45.6 A92.35,22.8 0 1 1 92.35016 45.6"></path>
    <rect width="225.1" height="63.3" transform="matrix(0.742794, -0.66952, 0.66952, 0.742794, 242.258, 216.595)" rx="0"></rect>
</g>

I would like to do an ungroup function that removes the <g> element and place inner elements outside of g, but keeps all matrix transformations from group and their own transformations.

Tried multiple methods but they all have different issues where inner elements are not placed in the correct position or transformations are not copied.

The following seems to do something, but works for rotation only, if skew is applied - elements are totally different.

matrixMultiply(...matrices: DOMMatrix[]) : DOMMatrix {
    let args = arguments, i = args.length, m = args[i-1];

    while(i-- > 1) {
        let m1 = args[i-1] as Matrix;
        m = m1.multiply(m);
    }

    return m;
}

let groupMatrix = groupElement.transform.baseVal.getItem(0).matrix;
groupElement.childNodes.forEach(child => {
    let childTransform = (child as SVGGraphicsElement).transform.baseVal.getItem(0),
    childMatrix = childTransform.matrix,
    childInverseMatrix = childMatrix.inverse();
    let gm = matrixMultiply( childInverseMatrix, groupMatrix, childMatrix );

    childTransform.setMatrix(gm);
});

Copyright Notice：Content Author:「Andrei」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/73784721/svg-group-to-child-transforms