Find out how to use a scrollable view as a masks?

I’ve a crimson rectangle that takes up your entire display. I want to masks this rectangle with a ScrollView consisting of a collection of rectangular shapes, such that I’m able to solely see the beneath crimson rectangle by means of the frames of the rectangles within the ScrollView.

My method, beneath, makes scrolling on the ScrollView not work.

Please observe that as a substitute of a crimson rectangle, I want to have a customized background picture, therefore any suggestion to easily give a static crimson background to every of the ScrollView gadgets wouldn’t be satisfactiory.

Thanks.

            Rectangle()
                .fill(Coloration.crimson)
                .masks {
                    ScrollView{
                        LazyVStack(spacing: 10) {
                            Rectangle().body(width: .infinity, top: 500)
                            Rectangle().body(width: .infinity, top: 500)
                            Rectangle().body(width: .infinity, top: 500)
                        }
                    }
                }