how to recognize point(x y) is inside svg group geometry elements

Question

as my code (whether a point is inside an element like rectangle, polygon, polyline, line, circle) is working perfectly but if I want to implement this one for the group element of rectangle, polygon, polyline, line, circle, then it does not work (means isPointInFill() or isPointInStroke() does not work for the group Id).

I would be grateful if someone help me solving this.
--------------------------------------------------------

const width = document.getElementById("svgID").viewBox.baseVal.width; 
const height = document.getElementById("svgID").viewBox.baseVal.height; 

let draw = Snap('#svg');

let c = 0;  // a counter for each generated element
let count = 0;  // counter for rows
let size = Math.round(0.05 * width);
let circleSize = 25;
let circleColor = ["#ff0000", "#000000", "#00ffe1", "#0051ff"];

for (let i = 0; i <= width; i = i + size) {

    count++;

    for (let j = 0; j <= height; j = j + size) {
        // increment our element counter
        c += 1;
        let rect = draw.rect(i, j, size, size);
        
        let circle4 = draw.circle(i + (size / 2), j + (size / 2), circleSize);

        circle4.attr({
            fill: circleColor[3],
            "fill-opacity": 1,
            stroke: "#000",
            "stroke-width": "1px",
            id: "circle4_" + c,
            name: "circle4_" + c
        });

        rect.attr({
            fill: "#d00bf3",
            "fill-opacity": 0.2,
            stroke: "#000",
            "stroke-width": "1px",
            id: "rect_" + c,
            name: "rect" + c
        });


        const circleID = document.getElementById(`circle4_${c}`);
        
        //for individual element id:
        /*let element_ids = ["polygon870", "polygon36458", "polygon34", "polygon38"];*/
        
        //for group id:
        let element_ids = ["g5523", "g5526", "g5529", "g5532", "g5535", "g5538" ];

        //let b_062 = document.getElementById("b_06.2");

        let point = {x: circleID.cx.baseVal.value, y: circleID.cy.baseVal.value};
        /*let point = document.getElementById("svgId").createSVGPoint();
        point.x = circleID.cx.baseVal.value;
        point.y = circleID.cy.baseVal.value;*/

        //console.log(`Point at ${point.x}, ${point.y}:`, polygon870.isPointInStroke(point));
        //console.log(`Point at ${point.x}, ${point.y}:`, polygon36458.isPointInStroke(point));
        //console.log(`Point at ${point.x}, ${point.y}:`, b_062.isPointInFill(new DOMPoint(point.x, point.y)));
        /*let result = g5523.isPointInFill(205, 205);
        console.log(`Point at (${point.x}, ${point.y})- (circleID: ${result}`);*/
        for (let id of element_ids) {
            let result = document.getElementById(id).isPointInFill(new DOMPoint(point.x, point.y));
            let result2 = document.getElementById(id).isPointInStroke(new DOMPoint(point.x, point.y));
            if (result) {
                console.log(`Point at (${point.x}, ${point.y})- (circleID: ${circleID.id}): ${result}`);
                console.log(`Point at (${point.x}, ${point.y})- (circleID: ${circleID.id}): ${result2}`);
            }
        }
    }

}