How to present views one at a time in SwiftUI - xcode

Question

I am looking to make a quiz app using SwiftUI. I have now designed all of the views, but I am having trouble displaying the questions correctly.
I have a home view which for now just has a button that should display a questionView (has only one question) in order and one at a time.
I am using a ForEach to step through each question in a questions array and display a questionView with that specific question, but the problem is that the ForEach displays every question at the same time instead of waiting for the question to be submitted.
How can communicate with the ForEach (or any other function) to tell it when to start and stop showing questionViews.
struct Home: View {
#State var presentQuestionView: Bool = false
#StateObject var questionViewModel: QuestionViewModel = QuestionViewModel()
#State var isCompleted = false
var body: some View {
VStack {
Spacer()
Text("Guess Players")
.font(.title2)
.bold()
.onTapGesture {
presentQuestionView.toggle()
}
Spacer()
}
.sheet(isPresented: $presentQuestionView, content: {
ForEach(questionViewModel.questions.indices) { index in
QuestionView(question: questionViewModel.questions[index], presentQuestionView: $presentQuestionView, progressWidth: questionViewModel.progress(currentIndex: index) )
.offset(x: questionViewModel.currentQuestion().isCompleted ? 1000 : 0)
.rotationEffect(.init(degrees: questionViewModel.currentQuestion().isCompleted ? 1000 : 0))
}
})
}
}
when the button is clicked, I want the ForEach statement to present the QuestionView one at a time.
Here is my QuestionView
struct QuestionView: View {
#ObservedObject var question: Question
#Binding var presentQuestionView: Bool
var progressWidth: CGFloat
#State var isSubmitted = false
#State var buttonText = "Submit"
var body: some View {
VStack {
ZStack(alignment: Alignment(horizontal: .leading, vertical: .center), content: {
Capsule()
.fill(Color.gray.opacity(0.7))
.frame(height: 6)
Capsule()
.fill(Color.green)
.frame(width: progressWidth, height: 6)
})
Text("Guess The Player!")
.font(.system(size: 38))
.fontWeight(.heavy)
.foregroundColor(.purple)
.padding(.top)
Text("Career Averages: ")
.font(.title2)
.fontWeight(.heavy)
.foregroundColor(.black)
.padding(.top, 8)
Text("Points Per Game: \(question.answer.stats!.pointsPerGame)")
.font(.system(size: 20))
.fontWeight(.heavy)
.foregroundColor(.black)
.padding(.top, 5)
Text("Assists Per Game: \(question.answer.stats!.assistsPerGame)")
.font(.system(size: 20))
.fontWeight(.heavy)
.foregroundColor(.black)
.padding(.top, 5)
Text("Rebounds Per Game: \(question.answer.stats!.reboundsPerGame)")
.font(.system(size: 20))
.fontWeight(.heavy)
.foregroundColor(.black)
.padding(.top, 5)
Spacer(minLength: 0)
LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 20), count: 2), spacing: 25, content: {
Player_Cards(question: question, isSubmitted: $isSubmitted)
})
.padding()
Spacer(minLength: 0)
Button(action: {
if isSubmitted == false {
//update the score
if question.isCorrect() {
} else {
}
//update the view to show the correct answer
isSubmitted.toggle()
buttonText = "Next Question"
} else {
//Go into the next question
}
}, label: {
Text(buttonText)
.fontWeight(.heavy)
.foregroundColor(.white)
.padding(.vertical)
.frame(maxWidth: .infinity)
.background(Color.blue)
})
}
.background(Color.black.opacity(0.05).ignoresSafeArea())
}
}
This is what currently happens when I run this project