How to use MouseArea in ScrollView and Flow

Question

I do want to use an MouseArea to show a clickable Button within a Flow with in a ScrollView. Reason for this structure is that the Objects are created dynamically from the user, so I want to place them in a Flow to ensure vertical placement and in a ScrollView to ensure scrolling if the become to many objects.

    ScrollView {
            clip: true
            id: shiftsScrollView
    
            wheelEnabled: true
            //ScrollBar.vertical.policy: ScrollBar.AlwaysOn
    
            height: 100
            width: 300
            anchors.left: shiftsTitle.left
            anchors.top: shiftsTitle.bottom
            //spacing: 0
            anchors.leftMargin: 0
            anchors.topMargin: 20
    
            Flow {
                id: scrollableFlow
                layoutDirection: Qt.RightToLeft
                flow: Flow.TopToBottom

// Objects will be filled in here at runtime
    
            }
    
    
        }

This is how the Objects will be created within a js function:

for (let i=0; i<amountOfShifts; i++) {
            var myShift = Qt.createQmlObject(
                        'ShiftListElement {
                        width: 300;
                        height: 25;
                        shiftText: "'+splittedShifts[i]+'";
                        shiftName: "'+shiftNames[i]+'";

                        }',
                        scrollableFlow,
                        "shiftElement");
            shiftListObjects.push(myShift);
            shiftsScrollView.contentHeight = amountOfShifts * 25
        }

Note that the ID 'scrollableFlow' is the one in the ScrollView and you can see visually that it works. The Objects get placed vertically in order without knowing each other before.

QML Object which contains the non-working MouseArea:

    Item {
        id: item1
    
        property string shiftText: "shift";
        property string shiftName: "name";
    
        width: 200
        height: 100
    
        Text {
            id: text1
            text: item1.shiftText
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 12
            anchors.horizontalCenterOffset: -30
            anchors.horizontalCenter: parent.horizontalCenter
        }
    
        Button {
            id: button
            width: 20
            height: 20
            text: qsTr("X")
            anchors.verticalCenter: text1.verticalCenter
            anchors.left: text1.right
            anchors.leftMargin: 20
            MouseArea {
                id: buttonCommitShiftMouseArea
                anchors.fill: parent
                preventStealing: true
                onClicked:
                {
    
                   console.log("I work!");
    
                }
            }
        }
    
    }

I found some answers recommending the property "preventStealing", but it doesn't seem to have an effect in this case. I also tried removing Flow, which doesn't seem to make a difference either. It did work before outside of a ScrollView in a regular Item, which makes me think that the ScrollView steals all MouseEvents within. The ScrollView is scrollable as wished and appears in wanted size.

Did I miss something? Thank you for your help.