NavigationDestination, NavigationLink with List and ForEach Does Not Work

Dear community,

I am a new developer and I am building a view (called Root) that has a list of rows where clicking each row navigates to a completely different view.

I have a CaseIteratable enum and I list each enum type using ForEach and each enum case navigates to a different view using NavigationLink and NavigationDestination. But the problem is that clicking any of the rows for the first time navigates correctly to the corresponding view. But when I go back to the root view and chose another row, it navigates me to a blank view for less than a sec and automatically navigates back to the root view.

Below is the code for reference.

I would really appreciate some help and advice here. Thank you very much!

struct RootViewNavigationStack: View {
    @AppStorage("items") private var items = Item.allCases
    @State private var enableMove = false
    
    @State private var rootStackPath: NavigationPath = .init()
    
    var body: some View {
        NavigationStack(path: $rootStackPath) {
            VStack {
                List {
                    ForEach(items) { item in
                        HStack {
                            NavigationLink(value: item) {
                                ListCell(
                                    icon: item.icon,
                                    title: item.title)
                            }
                            .disabled(enableMove)
                            
                            if enableMove {
                                withAnimation {
                                    Image(systemName: "line.3.horizontal")
                                        .foregroundStyle(.secondary)
                                }
                            }
                        }
                        
                    }
                    .onMove(perform: enableMove == true ? moveItems : nil)
                }
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button {
                        enableMove.toggle()
                    } label: {
                        if enableMove {
                            Text("Done")
                                .bold()
                        } else {
                            Text("Edit")
                        }
                    }
                }
            }
            .navigationDestination(for: Item.self) { item in
                item.destinationView
            }
            .navigationTitle("Root")
        }
    }
}

and this is the Item enum for more info

Just kindly ignore the var iconName since it doesnt represent any actual SF Symbol name

enum Item: Identifiable, Codable, Hashable, CaseIterable {
    case view1
    case view2
    case view3
    case view4
    case view5
    
    var id: Item { self }
}

extension Item {
    var title: String {
        switch self {
        case .view1:
            "View1"
        case .view2:
            "View2"
        case .view3:
            "View3"
        case .view4:
            "View4"
        case .view5:
            "View5"
        }
    }
    
    var iconName: String {
        switch self {
        case .view1:
            "View1"
        case .view2:
            "View2"
        case .view3:
            "View3"
        case .view4:
            "View4"
        case .view5:
            "View5"
        }
    }
    
    var icon: Image {
        Image(systemName: self.iconName)
    }
    
    @ViewBuilder
    var destinationView: some View {
        switch self {
        case .view1:
            CarView()
        case .view2:
            HouseView()
        case .view3:
            MusicView()
        case .view4:
            ShoesView()
        case .view5:
            BooksView()
        }
    }
}

Once again, would really appreciate someone to help and many thanks 🙏!