When removing a ToolbarItem from the navigation bar, how do I make the remaining ToolbarItems resize correctly?

Because .searchable does not allow for customizing buttons in the search bar, I've manually had to recreate the search bar as shown below. However, when removing one of the items in the search bar, the TextField does not resize correctly and effectively inserts padding on the leading edge. When the TextField is focused, it resizes and fills the entire space. If the "Compose" button was already hidden when the search bar is presented, it lays out correctly. How do I resize the TextField after removing the "Compose" button automatically?

Thanks, jjp

struct ContentView: View {
    @State var isSearchBarVisible = false
    @State var isComposingMessage = false
    @State var searchText = ""

    let items: [String] = ["hey", "there", "how", "are", "you"]

    var searchItems: [String] {
        items.filter { item in
            item.lowercased().contains(searchText.lowercased())
        }
    }

    var body: some View {
        NavigationStack {
            VStack {
                List {
                    if !searchText.isEmpty {
                        ForEach(searchItems, id: \.self) { item in
                            Text(item)
                        }
                    } else {
                        ForEach(items, id: \.self) { item in
                            Text(item)
                        }
                    }
                }
            }
            .toolbar {
                if isSearchBarVisible {
                    ToolbarItem(placement: .principal) {
                        TextField("Search", text: $searchText)
                            .padding(8)
                            .background(Color.gray.opacity(0.2))
                    }
                    ToolbarItem(placement: .topBarTrailing) {
                        Button(action: {
                            isSearchBarVisible = false
                        },[![enter image description here][1]][1]
                               label: {
                            Text("Cancel")
                        })
                    }
                    if !isComposingMessage {
                        ToolbarItem(placement: .topBarTrailing) {
                            Button(action: {
                                isComposingMessage.toggle()
                            },
                                   label: {
                                Text("Compose")
                            })
                        }
                    }
                }
                else {
                    ToolbarItem(placement: .topBarLeading) {
                        Button(action: {
                            isSearchBarVisible = true
                        },
                               label: {
                            Text("Search")
                        })
                    }
                    ToolbarItem(placement: .principal) {
                        Text("Title")
                    }
                    ToolbarItem(placement: .topBarTrailing) {
                        Button(action: {
                            isComposingMessage.toggle()
                        },
                               label: {
                            Text("Compose")
                        })
                    }
                }
            }
        }
    }
}