How Can I Show Other Screen After The 5th Content Of ForEach

first of all I have a premium subscription, what I want to archive is that in the first 3 content of foreach I want user the see content without any problems but when they click on the 4th content I want to show the paywall screen so after that if they want to see more they have to pay. I feel like I should check if the item index in the array if It’s the 3rd item in the array but I couldn’t get that logic so I need some help, I hope I explained it well.

struct ContentView: View {

@Environment(ViewModel.self) var viewModel
@Environment(PaywallViewModel.self) var paywallViewModel

var body: some View {
    
    @Bindable var vm = viewModel
    
    NavigationStack {
        GeometryReader { geo in
            ScrollView(showsIndicators: false) {
                ForEach(self.viewModel.filteredDinos) { predator in
                        VStack {
                            NavigationLink(destination: PredatorDetail(predator: predator, position: .camera(MapCamera(centerCoordinate: predator.location, distance: 2000)))) {
                                withAnimation {
                                    PredatorCard(predator: predator)
                                }
                            }
                        }
                        .frame(width: geo.size.width)
                    }
                .navigationTitle("Jurassic Journey")
                .searchable(text: $vm.searchText)
                .autocorrectionDisabled()
                .toolbar {
                    ToolbarItem(placement: .topBarLeading) {
                        Button(action: {
                            withAnimation {
                                self.viewModel.alphabetical.toggle()
                            }
                        },
                               label: {
                            Image(systemName: self.viewModel.alphabetical ? "film" : "textformat")
                                .symbolEffect(.bounce, value: self.viewModel.alphabetical)
                            // ? anlamı = alphabetical doğru ise... film kullan : anlamı doğru değil ise... textformat kullan. Ve bu şekilde yazılınca adı Ternary if statement oluyor.
                        })
                    }
                    
                    ToolbarItem(placement: .topBarTrailing) {
                        Menu {
                            Picker("Filter", selection: $vm.currentTypeSelection.animation()) {
                                ForEach(PredatorType.allCases) { type in
                                    Label(type.rawValue.capitalized, systemImage: type.icon)
                                }
                            }
                        } label: {
                            Image(systemName: "slider.horizontal.3")
                        }
                    }
            }
            }
        }
    }
    .navigationSplitViewStyle(.automatic)
    .preferredColorScheme(.dark)
}

>Solution :

There are a number of ways to do this, one simple way using an index, is to use

 ForEach(Array(viewModel.filteredDinos.enumerated()), id: \.offset) { index, predator in ...

Then you can check the index value and take the appropriate action.