Unexpected text's rectangle behavior in a row

Window {
    width: 640
    height: 480
    visible: true
    title: "QML Row Example"    

    Column {
        spacing: 20
        anchors.centerIn: parent        
        
        // First Row: Correct Behavior
        Row {
            spacing: 10            
            Rectangle {
                width: 20
                height: 20
                color: "grey"
            }            
            Text {
                text: "hello"
                Rectangle {
                    anchors.fill: parent
                    anchors.margins: -5
                    opacity: 0.5
                    color: "red"
                }
            }
        }        
 
        // Second Row: Unexpected red rectangle behavior
        Row {
            spacing: 10            
            Rectangle {
                width: 20
                height: 20
                color: "grey"
            }            
            Text {
                text: ""
                Rectangle {
                    anchors.fill: parent
                    anchors.margins: -5
                    opacity: 0.5
                    color: "red"
                }
            }
        }
    }
}