SwiftUI ForEach Animation inside border

I'm having issues animating views inside a ForEach list that's inside a border. Here's my code:

struct ContentView: View {
    @State var showNewMethodOptions = false
    
    var body: some View {
        VStack {
            Button {
                showNewMethodOptions.toggle()
            } label: {
                HStack {
                    Image(systemName: showNewMethodOptions ? "chevron.up" : "plus")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 32)
                        .foregroundColor(.blue)
                    Text("Add new payment method")
                        .foregroundColor(.gray)
                        .padding(.leading, 6)
                    Spacer()
                }
                .padding(.horizontal)
                .padding(.top, 20)
                .padding(.bottom, showNewMethodOptions ? 10 : 20)
            }
            
            if showNewMethodOptions {
                ForEach(PaymentMethodType.allCases) { method in
                    NavigationLink {

                    } label: {
                        ZStack(alignment: .center) {
                            RoundedRectangle(cornerRadius: 5)
                                .stroke(.blue)
                            Text(method.rawValue)
                                .font(.title3)
                                .foregroundColor(.gray)
                        }
                        .frame(height: 45.0)
                        .background()
                        .padding(.horizontal)
                        .padding(.vertical, 5)
                        .transition(.slide)
                    }
                }
            }
        }
        .animation(.spring, value: showNewMethodOptions)
        .padding(.bottom, showNewMethodOptions ? 16 : 0)
        .padding(.horizontal)
        .overlay(
            RoundedRectangle(cornerRadius: 4)
                .stroke(.gray, lineWidth: 1)
                .padding(.vertical, 4)
                .padding(.horizontal)
        )
    }
}

enum PaymentMethodType: String, CaseIterable, Identifiable {
    var id: Self {
        return self
    }
    
    case checking = "Checking"
    case savings = "Savings"
    case creditOrDebitCard = "Card"
}

When the animation happens, the "add a new payment method" HStack animates nicely enough, but the payment method options fade in while it's still sliding up, which doesn't look great because it looks like everything's on top of each other. The options also don't seem to follow the transition animation I apply to them - it's always just a fade. Is there a way to get these elements to animate together?