NavigationDestination sliding transition not working

Question

struct First_View: View {
    @State var secondViewShown = false
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("Step 1")
                Button(action: { secondViewShown.toggle() }) {
                    Text("Next")
                }
            }
            .navigationDestination(isPresented: $secondViewShown) {
                Second_View().navigationBarHidden(true)
            }
        }
    }
}


struct Second_View: View {
    @State var thirdViewShown = false
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("Step 2")
                Button(action: { thirdViewShown.toggle() }) {
                   Text("Next")
                }
            }
            .navigationDestination(isPresented: $thirdViewShown) {
                Third_View().navigationBarHidden(true)
            }
        }
    }
}

struct Third_View: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("Step 3")
            }
        }
    }
}

The code above is meant to be 3 pages where on click of a button in each view, the next one appears in a sliding transition from the right. When a user is navigated to the Second_View, thats exactly what happens and works fine.

But, when going from the second to the third view, there's no transition. The Third_View just appears on the screen. I'm guessing it replaced the Second_View instead of adding another destination from the Second_View.

Happy to hear any suggestions!