Vertical Paging UIScrollView incorrect height

I'm trying to implement a snapping scroll view like that of an Instagram Reels UI. The contents are in SwiftUI, and the scroll view is a UIScrollView wrapped in UIViewRepresentable. I enable paging on the UIScrollView to get the snap to item on scroll feature.

The contents of the scroll view is just some Texts that I set to full width and height of the screen:

struct FeedView: View {
    var body: some View {
        VStack(spacing: 0) {
            Text("")
                .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
                .background(.red)
            Text("")
                .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
                .background(.green)
            Text("")
                .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
                .background(.blue)
        }
    }
}

The scroll view representable is as follows:

struct ScrollSnapView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIScrollView {
        let view = UIScrollView()
        view.isPagingEnabled = true
        view.showsVerticalScrollIndicator = false
        view.showsHorizontalScrollIndicator = false
        view.contentInsetAdjustmentBehavior = .never
        
        let child = UIHostingController(rootView: FeedView())
        child.view.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height * 3)
        view.contentSize = CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height * 3)
        view.addSubview(child.view)
        
        return view
    }
    
    func updateUIView(_ uiView: UIScrollView, context: Context) {
    }
}

And then I instantiate a ScrollSnapView with ignoreSafeArea in the main struct:

@main
struct App: App {
    var body: some Scene {
        WindowGroup {
            ScrollSnapView()
                .ignoresSafeArea()
        }
    }
}

Here is a recording of the scrolling:

As you can see, when I scroll to the second page, there is a little red visible on the top. And when I scroll to the third page, there is a little green visible. How can I make UIScrollView page to the exact bounds of each page?

I've tried removing this line in makeUIView:

view.contentInsetAdjustmentBehavior = .never

It includes the safe area bounds when paging (which I don't want, I want to completely hide the safe area), but at least it fully scrolls to the top bound of each page.

I've tried this answer, but it doesn't work.

Just add .ignoresSafeArea() in the VStack

struct FeedView: View {
var body: some View {
    VStack(spacing: 0) {
        Text("")
            .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
            .background(.red)
        Text("")
            .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
            .background(.green)
        Text("")
            .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
            .background(.blue)
    }.ignoresSafeArea()  //notice this line
  }
}