How to resize retangle in group

Question

So I have a group consisting of rectangles and lines, when I click the editverticalrectangleonly() button the size can only be edited, but why can't it? Rectangles cannot be edited in size

function addRedGroup() {
    var rect = new fabric.Rect({
        left: 100,
        top: 50,
        fill: "red",
        width: 20,
        height: 50,
        objectCaching: false,
        stroke: "red",
        strokeWidth: 4,
        lockMovementY: true,
        lockScalingX: false, // Allow horizontal scaling
        lockScalingY: false,
        hasControls: true
    });

    var line = new fabric.Line([100, 0, 100, 100], {
        stroke: "red",
        strokeWidth: 4,
        originX: "center",
        originY: "center",
        lockMovementY: true,
        hasControls: true
    });

    var group = new fabric.Group([rect, line], {
        left: 120,
        top: 94,
        lockMovementY: true
    });
    canvas.add(group);
    canvas.setActiveObject(group);

    let centerPoint = line.getCenterPoint()
    rect.setPositionByOrigin(centerPoint, 'center', 'center')

    canvas.on('object:moving', function(options) {
        var target = options.target;
        if (target === group) {
            var leftStep = Math.round(target.left / 40) * 40;
            target.set({
                left: leftStep
            });
        }
    });
}
function editVerticalRectangleOnly() {
    var activeObject = canvas.getActiveObject();

    // Edit only the rectangle in the active group
    var rect = null;
    if (activeObject && activeObject.type === 'group') {
        rect = activeObject.getObjects().find(obj => obj.type === 'rect');
    }

    if (rect) {
        rect.set({
            selectable: true, // Enable selection
            evented: true, // Enable events
            lockMovementY: false, // Allow vertical resizing
            lockMovementX: true,
            hasControls: true, // Show resizing controls
            hasBorders: true, // Show borders
            cornerStyle: 'circle', // Set corner style
            lockScalingX: false, // Allow horizontal scaling
            lockScalingY: false, // Allow vertical scaling
        });

        // Setelah ungroup, atur kembali lockScalingX dan lockScalingY ke false
        canvas.on('after:render', function() {
            rect.set({
                lockScalingX: false,
                lockScalingY: false,
            });
            canvas.off('after:render');
        });

        canvas.setActiveObject(rect);
        canvas.renderAll();
    }

    // Allow deleting and duplicating the rectangle
    canvas.forEachObject(obj => {
        if (obj.type !== 'rect') {
            obj.selectable = true;
            obj.evented = true;
        }
    });
}

addRedGroup () is a function to create a group, editVerticalRectangleOnly() is a function to edit a rectangle in a group