Unknown white space inside SwiftUI which can't display any element on top of it

There is a white space inside my SwiftUI View which is not filled out properly. In that white space area, there is nothing that I can display on top of it. I tried putting a red border around each element one by one, and I found out that the white space belongs to ZStack.

However, I still could not get rid of it. How to deal with this problem?

Below are my code and reference picture:

unknown white space image

struct ForTest: View {
var body: some View {
    ZStack {
        Color.gray.edgesIgnoringSafeArea(.all)
        VStack {
            ZStack(alignment: .topLeading) {
                Rectangle()
                    .fill(.red)
                    .frame(width: .infinity, height: 300)
                    .edgesIgnoringSafeArea(.all)
                    .background(.white)
            }
            .border(.red)
            
            ScrollView {
                VStack {
                    ForEach(1...15, id: \.self) {_ in
                        Text("Hello, World")
                            .padding()
                    }
                }
            }
        }
    }
}
}