How to recognise tap on Searchable Modifier

Question

I’m looking for a way to hide certain content when a user taps on the search bar, using the native .searchable modifier. Currently, the issue is that when the user clicks on the search bar, it allows them to search, but the content on the page remains visible until they start typing. Ideally, I want the content to be hidden immediately upon tapping the search bar, showing a blank page with just the search bar. However, I’m unsure how to detect the tap gesture on the search bar to trigger this behavior. I’d prefer to stick with the .searchable modifier if possible.

struct ExploreVIew: View {
    @State private var isTyping = false
    @State private var searchText = ""
    var body: some View {

     VStack {

                if isTyping {
                    // Show List of Users
                    List {
                        ForEach(filteredBrothers) { user in
                            NavigationLink(value: user) {
                                UserRowView(user: user)
                            }
                        }
                    }
                    .listStyle(.plain)
                }else{

BackgroundContentExample()
}


}
            .navigationTitle("Explore")
            .navigationBarTitleDisplayMode(.inline)
            .searchable(text: $searchText, placement: .automatic, prompt: "Search for...").onTapGesture {
                isTyping = true
            }
            .onChange(of: searchText) { newValue in
                isTyping = !newValue.isEmpty
            }
}

}