Nesting ForEach loop and LazyVStack error - swiftui

Question

I have encountered two issues below my codes. They should be a simple fix but I couldn't figure them out by myself.
The first issue is I cannot pass my nested ForEach loop to change the system images. The reason I used for nested ForEach loop is the Xcode always throw the error "Expression was too complex to be solved in reasonable time". Here is the original link for this problem.
Nested If Statement in ForEach loop
import SwiftUI
struct HymnLyrics: View {
let verseImages: [String] = ["2.circle.fill", "3.circle.fill", "4.circle.fill", "5.circle.fill"]
var lyrics: [Lyric] = LyricList.hymnLa
#AppStorage("fontSizeIndex") var fontSizeIndex = Int("Medium") ?? 18
#AppStorage("fontIndex") var fontIndex: String = ""
#AppStorage("showHVNumbers") var showHVNumbers: Bool = true
#AppStorage("scrollToIndex") var scrollToIndex: Int?
var body: some View {
ScrollView {
ScrollViewReader { proxy in
LazyVStack(spacing: 10) {//LazyVStack is crash
ForEach (lyrics, id: \.id) { lyric in
Group {
HStack {
if showHVNumbers {
Image(systemName: "1.circle.fill")
.font(.title2)
.foregroundColor(.red)
}
Text(lyric.verse1)
.font(Font.custom(fontIndex, size: CGFloat(fontSizeIndex)))
Spacer()
}
ForEach ([lyric.verse2, lyric.verse3, lyric.verse4, lyric.verse5], id: \.self) { verseCount in
if (verseCount != nil) {
HStack {
if showHVNumbers {
Image(systemName: verseImages[verseCount])// Here is the error, it simply not works.
.font(.title2)
.foregroundColor(.red)
}
Text(verseCount ?? "")
.font(Font.custom(fontIndex, size: CGFloat(fontSizeIndex)))
Spacer()
}
}
}
}
.foregroundColor(.primary)
.padding(.horizontal, 10.0)
.padding(.bottom)
Divider()
}
.onChange(of: scrollToIndex, perform: { value in
proxy.scrollTo(value, anchor: .top)
})
}
}
}
}
}
The second issue is the app crashed when I scroll down to the bottom. When I replace LazyVStack with regular VStact, it works. But I want to use LazyVStack in this case. Please guide me for both of the issues. Thanks you in advance.