Iterating type of assymetric transition causes glitch

Question

I am trying to replicate the Next/Previous push transition in SwiftUI.

It seems to work but there is a glitch when the type of transition changes.

Here is the minimal code:

enum CustomTransition {
    case next, back
    var value: AnyTransition {
        switch self {
        case .next:
            return AnyTransition.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .leading))
        case .back:
            return AnyTransition.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing))
        }
    }
}

struct Playground: View {
    @State var transition:CustomTransition = .next
    @State var counter = 0
    var body: some View {
        NavigationView {
            VStack {
                ScrollView {
                    VStack {
                        Text("Count is \(counter)")
                            .frame(maxWidth:.infinity)
                    }
                    .background(Color.red)
                }
                .id(counter)
                .transition(transition.value)
                .animation(.easeIn, value: counter)
                HStack {
                    Button("Previous") {
                        transition = .back
                        counter -= 1
                    }
                    Button("Next") {
                        transition = .next
                        counter += 1
                    }
                }
            }
        }
    }
}

#Preview {
    Playground()
}

And this is the result I get

As you can see, when I start going Next everything works well. However, as I try to switch my transition when going from 3 to 2 - there is a glitch. Then, when going back it works as expected.

The same glitch occurs when I try to go Next after reaching 0.

Looks like the "old" value of the screen retains the old value of transition and the new value is only applied to the new screen (I hope this is clear).

How can this be fixed?