Extraneous alignment of a SwiftUI.Menu when animated by the keyboard appearing

I'm facing a weird alignment issue with a floating menu when the keyboard appears and I've no idea if there's a workaround. To reproduce the issue, simply copy and paste this code:

struct ContentView: View {

    @State var searchQuery = ""
    
    var customToolbarButton: some View {
        VStack {
            Text("Example").font(.footnote)
            Image(systemName: "arrowtriangle.down.fill").imageScale(.small)
        }.foregroundColor(.accentColor)
    }
    
    var body: some View {
        NavigationView {
            Rectangle().fill(.red)
            .safeAreaInset(edge: .bottom) {
                HStack(alignment: .center) {
                    customToolbarButton
                    Spacer()
                    Menu { } label: {
                        customToolbarButton
                    }
                }
                .frame(height: 52)
                .padding(.horizontal)
                .background(Color.white)
                .clipShape(Capsule(style: .continuous))
            }
        }.searchable(text: $searchQuery)
    }
}

When the keyboard appears and moves the HStack up, the views that are a Menu are wrongly placed, all other views seem fine. Any idea if there's a fix?

Video to illustrate the issue: https://twitter.com/xmollv/status/1616851571832229889

Extraneous alignment of a SwiftUI.Menu when animated by the keyboard appearing
 
 
Q