Wrong layout of items when using layer.enabled with Row/Column

Row {

    Rectangle {
        width: 100
        height: 100
        color: "green"

        layer {
            effect: ColorOverlay {
                color: "red"
            }
            enabled: true
        }
    }

    Rectangle {
        width: 100
        height: 100
        color: "green"

        layer {
            effect: ColorOverlay {
                color: "blue"
            }
            enabled: true
        }
    }

    Component.onCompleted: {

        print("Children count : " + children.length)

        for(var i = 0 ; i < children.length; i++) print("|- " ,children[i])
    }
}