What is incorrect about this Loader and it's states?

EStudley

I am creating a simple Loader element with three states. I want to set a default state for the Loader.

Loader {
    id: loader
    Layout.fillWidth: true
    Layout.fillHeight: true

    states: [
        State {
            name: "Page1"
            PropertyChanges { target: loader; source: "Page1.qml" }
        },
        State {
            name: "Page2"
            PropertyChanges { target: loader; source: "Page2.qml" }
        },
        State {
            name: "Page3"
            PropertyChanges { target: loader; source: "Page3.qml" }
        }
    ]
}

If I try to set a default state with states:

state: "Page1"

Page1.qml is rendered twice, one incorrectly at 0,0 of the Loader that never disappears and one correctly that switches when the state is changed later. It's like the width of the first version is 0..

If I set it after Component completion:

Component.onCompleted: state = "Page1"

The default page loads once as expected and switches when the state is changed later.

Any ideas?