A weird problem of LazyVGrid layout

I wrote some code using LazyVGrid.

struct LazyVStackTestView: View {
    let columnGridItem = Array(repeating: GridItem(), count: 3)
    var body: some View {
        GeometryReader{geo in
            HStack{
                Rectangle().frame(maxWidth: 300,maxHeight: 100)
                LazyVGrid(columns: columnGridItem){
                    ForEach(1..<13) { btn in
                        Image(systemName: "plusminus.circle")
                            .resizable()
                            .scaledToFit()
                            .clipShape(Circle())
                    }
                }
                .padding()
                .frame(maxWidth: geo.size.height*0.6, maxHeight: geo.size.height)
            }.border(Color.black)
            .padding()
        }.border(Color.blue)
    }
}

When run it on simulator(iPhone 11) in horizontal orientation, I get a 4rows3columns button pad that is what I want. But when I turn the simulator to vertical orientation and back to horizontal orientation immediately, the button pad becomes 3rows3columns! What had happened? Any help will be appreciated.