Search field as in Mail App

How can i achieve the same behavior as the bottom bar on the Mail app?

Button -> Search Field -> Button

right now, if do as follows, they overlap as if they are not in the same space

NavigationStack {
                VStack {
                    HeaderView()
                    ListView()
                }
            }
            .toolbar(.hidden, for: .tabBar)
            .searchable(text: $searchText)
            .searchToolbarBehavior(.minimize)
            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    Button {
                        
                    } label: {
                        Label("Button1", systemImage: "person")
                    }
                }
                
                ToolbarItem(placement: .bottomBar) {
                    Button {
                        
                    } label: {
                        Label("Button2", systemImage: "person")
                    }
                }
            }