swiftui bottom padding has no effect on a geometryreader view component

I was following the Swiftui tutorial at section 6 (https://developer.apple.com/tutorials/swiftui/creating-and-combining-views) to use a circle image to create an overlapping effect on the map. Turns out that when using a GeometryReader, the bottom padding was not working at all:

VStack{ MapView().frame(height:300)

    CircleImage()
        .offset(y: -130)
        .padding(.bottom, -130)
    
    VStack(alignment:.leading){
        Text(
            "Turtle Rock"
        )
        .font(
            .title
        )
        
        HStack {
            Text(
                "Joshua Tree National Park"
            )
            .font(
                .subheadline
            )
            Spacer()
            Text(
                "California"
            )
            .font(
                .subheadline
            )
        }
    }.padding(/*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)
}

This is the code for the CicleImage view: GeometryReader(content: { geometry in

        let _ = print(
            geometry.size.width
        )
        AsyncImage(
            url: URL(
                string: "https://cms.rationalcdn.com/v3/assets/blteecf9626d9a38b03/bltf5486c52361f2012/6144fafd39dff133fc23de9f/img-ios.png"
            )
        )
        .frame(width: geometry.size.width)
        .clipShape(
            Circle()
        ).overlay{
            Circle().stroke(
                .white,
                lineWidth: 4
            )
        }.shadow(
            radius: 7
        )
    })