NavigationView stack pops after navigating to View

Question

struct ConversationsView: View {
    @State private var showNewMessageView = false
    @State private var showChatView = false

    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            NavigationLink(destination: ChatsView(), isActive: $showChatView, label: {})
            ScrollView {
                VStack(alignment: .leading) {
                    ForEach(0...10, id: .self) { _ in
                        ConversationCell()
                            .padding(.horizontal)
                    }
                }
            }
            Button(action: {
                showNewMessageView.toggle()
            }, label: {
                Image(systemName: "square.and.pencil")
                    .resizable().scaledToFit().frame(width: 24, height: 24)
                    .padding()
            }).background(Color(.systemBlue))
                .foregroundColor(.white)
                .clipShape(Circle())
                .padding()
                .sheet(isPresented: $showNewMessageView, content: { NewMessageView(showChatView: $showChatView) })
        }
    }
}

struct NewMessageView: View {
    @Binding var showChatView: Bool
    @Environment(.presentationMode) var presentation
    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                ForEach(0...10, id: .self) { _ in
                    Button(action: {
                        showChatView.toggle()
                        presentation.wrappedValue.dismiss()
                    }, label: { UserCell() })
                }
            }
        }
    }
}

I tried using .isDetailLink(false) on the NavigationLink and also tried to set the style to .stack on the wrapping NavigationView .navigationViewStyle(.stack) but that didn't work for me either. I think this might be an issue where the state updates, when the view is being pushed on the stack showChatView is being set back to its initial value false that's causing the view to pop