Having a white space in the name property of State causes a compilation error

import QtQuickRectangle {
    id: root
    color: "black"
    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }    
    states: [
        State {
            name: "red screen" // <-- space is there
            when: mouseArea.pressed
            PropertyChanges { target: root; color: "red" }
        },
        State {
            name: "blue screen" // <-- space is there
            when: "Hello" === "World"
            PropertyChanges { target: root; color: "blue" }
        }
    ]
}
 

// main.qml
import QtQuick
import contentWindow {
    id: root
    visible:true
    width: 472; height: 272
    Rectangle {
        id: rect
        anchors.fill: parent
        color: "black"        
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onPressed: {
                console.log("pressed")
            }
        }        
        states: [
            State {
                name: "red screen" // <-- space
                when: mouseArea.pressed
                PropertyChanges { target: rect; color: "red" }
            },
            State {
                name: "blue screen" // < -- space
                when: mouseArea.released
                PropertyChanges { target: rect; color: "blue" }
            }
        ]
    }
}