ios – The right way to create dropdown in Swift UI?

I used to be attempting to create a dropdown in Swift UI. Many of the article urged to make use of overlay to create the identical. Tried some pattern code under, Nonetheless the when drop down comes up it does are available under the following content material.See Picture, The right way to make this seem like regular dropdown? I noticed it occurs once we add HStack, with out that it comes prime of the opposite view, which is anticipated, However when I attempt to add HStack its coming behind the UI.

 import SwiftUI

struct DropdownOption: Hashable {
    let key: String
    let worth: String
    
    public static func == (lhs: DropdownOption, rhs: DropdownOption) -> Bool {
        return lhs.key == rhs.key
    }
}

struct DropdownRow: View {
    var possibility: DropdownOption
    var onOptionSelected: ((_ possibility: DropdownOption) -> Void)?
    
    var physique: some View {
        Button(motion: {
            if let onOptionSelected = self.onOptionSelected {
                onOptionSelected(self.possibility)
            }
        }) {
            HStack {
                Textual content(self.possibility.worth)
                    .font(.system(dimension: 14))
                    .foregroundColor(Colour.black)
                Spacer()
            }
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 5)
    }
}

struct Dropdown: View {
    var choices: [DropdownOption]
    var onOptionSelected: ((_ possibility: DropdownOption) -> Void)?
    
    var physique: some View {
        ScrollView {
            VStack(alignment: .main, spacing: 0) {
                ForEach(self.choices, id: .self) { possibility in
                    DropdownRow(possibility: possibility, onOptionSelected: self.onOptionSelected)
                }
            }
        }
        .body(minHeight: CGFloat(choices.rely) * 30, maxHeight: 250)
        .padding(.vertical, 5)
        .background(Colour.white)
        .cornerRadius(5)
        .overlay(
            RoundedRectangle(cornerRadius: 5)
                .stroke(Colour.grey, lineWidth: 1)
        )
    }
}

struct DropdownSelector: View {
    @State non-public var shouldShowDropdown = false
    @State non-public var selectedOption: DropdownOption? = nil
    var placeholder: String
    var choices: [DropdownOption]
    var onOptionSelected: ((_ possibility: DropdownOption) -> Void)?
    non-public let buttonHeight: CGFloat = 45
    
    var physique: some View {
        Button(motion: {
            self.shouldShowDropdown.toggle()
        }) {
            HStack {
                Textual content(selectedOption == nil ? placeholder : selectedOption!.worth)
                    .font(.system(dimension: 14))
                    .foregroundColor(selectedOption == nil ? Colour.grey: Colour.black)
                
                Spacer()
                
                Picture(systemName: self.shouldShowDropdown ? "arrowtriangle.up.fill" : "arrowtriangle.down.fill")
                    .resizable()
                    .body(width: 9, top: 5)
                    .font(Font.system(dimension: 9, weight: .medium))
                    .foregroundColor(Colour.black)
            }
        }
        .padding(.horizontal)
        .cornerRadius(5)
        .body(width: .infinity, top: self.buttonHeight)
        .overlay(
            RoundedRectangle(cornerRadius: 5)
                .stroke(Colour.grey, lineWidth: 1)
        )
        .overlay(
            VStack {
                Picture("top-image")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .scaledToFit()
                if self.shouldShowDropdown {
                    Spacer(minLength: buttonHeight + 10)
                    Dropdown(choices: self.choices, onOptionSelected: { possibility in
                        shouldShowDropdown = false
                        selectedOption = possibility
                        self.onOptionSelected?(possibility)
                    })
                }
            }, alignment: .topLeading
        )
        .background(
            RoundedRectangle(cornerRadius: 5).fill(Colour.white)
        )
    }
}

struct DropdownSelector_Previews: PreviewProvider {
    @State non-public static var tackle: String = ""
    
    static var uniqueKey: String {
        UUID().uuidString
    }
    
    static let choices: [DropdownOption] = [
        DropdownOption(key: uniqueKey, value: "Sunday"),
        DropdownOption(key: uniqueKey, value: "Monday"),
        DropdownOption(key: uniqueKey, value: "Tuesday"),
        DropdownOption(key: uniqueKey, value: "Wednesday"),
        DropdownOption(key: uniqueKey, value: "Thursday"),
        DropdownOption(key: uniqueKey, value: "Friday"),
        DropdownOption(key: uniqueKey, value: "Saturday")
    ]
    
    
    static var previews: some View {
        VStack(spacing: 20) {
            
            
            HStack(){
                DropdownSelector(
                    placeholder: "Day of the week",
                    choices: choices,
                    onOptionSelected: { possibility in
                        print(possibility)
                    })
                    .padding(.horizontal)
                    .zIndex(1)
                
                DropdownSelector(
                    placeholder: "Day of the week",
                    choices: choices,
                    onOptionSelected: { possibility in
                        print(possibility)
                    })
                    .padding(.horizontal)
                    .zIndex(1)
            }
            
            
            Group {
                TextField("Full Handle", textual content: $tackle)
                    .font(.system(dimension: 14))
                    .padding(.horizontal)
            }
            .body(width: .infinity, top: 45)
            .overlay(
                RoundedRectangle(cornerRadius: 5)
                    .stroke(Colour.grey, lineWidth: 1)
            )
            .padding(.horizontal)
        }
    }
}