Chaining transition. second one not triggered

Question

the scenario is the following.

I tap a button, the button move to the center of the view. after a few moment the button should slide to the left and disappear.

the second part is never triggered.

struct WelcomeScreen: View {
    
    @State private var zoom = false
    @State private var animate = false
    @Namespace private var smooth
    
    var body: some View {
        ZStack {
            Color.red.ignoresSafeArea()
            if !zoom {
                zoomed
            } else {
                VStack {
                    Button(action: { }) {
                        Text("Foo")
                    }
                    .buttonStyle(.bordered)
                    .matchedGeometryEffect(id: "morph", in: smooth)
                    .transition(.move(edge: .leading))
                }
            }
        }.animation(.default, value: animate)
    }
   
    var zoomed : some View {
        VStack {
            Spacer()
            Text("Bar")
            Spacer()
            Button(action: transition) {
                Text("Foo")
            }
            .buttonStyle(.bordered)
            .matchedGeometryEffect(id: "morph", in: smooth)
        }
        .padding()
    }
    
    
    private func transition() {
        withAnimation(.interpolatingSpring(mass: 1,
                                           stiffness: 250,
                                           damping: 15,
                                           initialVelocity: 0)){
            zoom.toggle()
            DispatchQueue.main.asyncAfter(deadline: .now() + 1.4) {
                animate.toggle()
            }
        }
    }
}

I guess I am doing something wrong with .animation(.default, value: animate)

Any idea or help would be very welcome