Qml半透明模糊叠加矩形

我正在尝试创建一个半透明模糊矩形，该矩形覆盖在 Qt Quick Qml 中的另一个矩形上。

Rectangle {
    id: mainRect
    anchors.fill: parent
    color: "transparent"

    // This is my background rect 
    Rectangle {
        id: backgroundRect
        anchors.fill: parent
        color: "blue"
    }

    // This is my semi-transparent-blur overlay rect  
    Rectangle {
        id: blurRect
        anchors.fill: parent
        color: "#000000"
        opacity: 0.5
    }
    
    // I did try these but I see black rectangle
    ShaderEffectSource {
        id: effectSource
        sourceItem: blurRect
        anchors.fill: blurRect
    }

    FastBlur{
        id: blur
        anchors.fill: effectSource
        source: effectSource
        radius: 32
    }
}

当我运行这个时，我看到一个黑色矩形。
我应该如何创建半透明模糊叠加矩形/项目。

以下是我过去在没有图层或手动使用 ShaderEffectSource 对象的情况下完成此操作的方法：

Image {
    id: backgroundImage
    source: "some_image.png"
}

Item {
    id: blurRect
    anchors.fill: parent
    
    FastBlur {
        anchors.fill: parent
        source: backgroundImage
        radius: 64
    }

    Rectangle {
        anchors.fill: parent
        color: "red"
        opacity: 0.5
    }
}