Menu Picker gets pushed up by keyboard

Question

when having a menu picker in a VStack and applying the .ignoresSafeArea(.keyboard) modifier the picker "button" gets pushed up by the keyboard. Sometimes its not pushed but it doesn't seem deterministic.

Video: https://i.stack.imgur.com/w3uEl.jpg

import SwiftUI

struct ContentView: View {
    @State var text = ""
    @State var selection = ""
    let foo = ["a","b","c"]
    var body: some View {
        VStack{
            TextField("test", text: $text)
            Spacer()
            HStack{
                Text("test")
                Menu(content:{
                    Picker(selection: $selection, label:
                        EmptyView()
                    , content: {
                        ForEach(foo,id:\.self){f in
                            Label(f, systemImage: "house")
                                .tag(f)
                        }
                    })
                    Picker(selection: $selection, label:
                        EmptyView()
                    , content: {
                        Label("test", systemImage: "plus.circle.fill")
                            .tag("test 1")
                    })
                },label:{
                    Text("test")
                })
            }
        }
        .ignoresSafeArea(.keyboard)

    }
}

An other example (with the suggested Geometry Reader)

Video: https://i.stack.imgur.com/gFFjU.jpg

import SwiftUI

    struct ContentView: View {
    @State var text = ""
    @State var selection = ""
    let foo = ["a","b","c"]
    @FocusState var focus
    var body: some View{
        GeometryReader{_ in
            ZStack{
                Color(UIColor.systemGray6)
                ScrollView{
                    VStack{
                        TextField("title", text: $text)
                            .focused($focus)
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .border(.orange)
                        Spacer()
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                }
                overlayInZStack

            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .ignoresSafeArea(.keyboard, edges: .bottom)
    }
    var overlayInZStack: some View {
        VStack{
            Spacer()
            HStack{
                Button("focus"){
                    focus = true
                }
                Menu(content:{
                    Picker(selection: $selection, label:
                        EmptyView()
                    , content: {
                        ForEach(foo,id:\.self){f in
                            Label(f, systemImage: "house")
                                .tag(f)
                        }
                    })
                    Picker(selection: $selection, label:
                        EmptyView()
                    , content: {
                        Label("test", systemImage: "plus.circle.fill")
                            .tag("test 1")
                    })
                },label:{
                    Image(systemName: "house")
                        .padding(10)
                        .background(Circle().foregroundColor(.red))
                        .border(Color.red)
                })
                .border(Color.orange)
            }
            .border(Color.green)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .border(Color.black)
        
    }
}