SwiftUI：ForEachで生成したButtonごとに、.sheetを表示させる内容を変えたい

Question

実現したいこと

ForEachで生成したButtonごとに、表示させる.sheetの内容を変えたい。

前提

Swift/Xcodeでゲーム開発をしています。
今回は、バトルログ画面でターン配列ごとにそのターンの詳細を見れるようにしたいと思っています。

発生している問題・エラーメッセージ

ForEachで配列の[turns]ごとにButtonが生成されており、.sheet{}内でBattleModalView()を呼び出し、引数に表示したいString（infoText: infoText）を渡しています。BattleModalView()のinfoText：Stringは@Stateで宣言しているため、再描画されるはずだと思ったのですが、いつ生成されたButtonを押しても配列の最初（turns[1]）の情報が描画されたBattleModalView()になります。これを、turns[2]で生成したButtonを押したらturns[2].infoText、turns[10]で生成したButtonを押したらturns[10].infoTextの情報がBattleModalView()に表示されるようにしたいです。

該当のソースコード

import SwiftUI
import Liquid

// 省略

struct TurnsView: View {
    var turns: [Turns]
    @State private var showingModal = false
    
    var body:some View {
        ForEach (0 ..< (turns.count ?? 0)) { index in
            let i = index
 
 // 省略               
                Button(action: {
                    self.showingModal.toggle()
                }) {
                    Text("ターンの詳細を見る")
                }.sheet(isPresented: $showingModal) {
                    let thisInfo = turns[i].infoText
                    BattleModalView(infoText: thisInfo)
                }
                .font(.system(size: 12))
                .frame( maxWidth: .infinity, alignment: .leading)
                .padding(.leading, 57)
                .foregroundColor(.blue)
                .fontWeight(.bold)
                
// 省略
            }
        }
    }
}

// 省略

struct BattleModalView: View {
    @State var infoText: String
    var body: some View {
        
        ScrollView {
            
            Text(infoText)
                .font(.system(size: 8))
                .foregroundColor(.black)
                .fontWeight(.bold)
                .padding()
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        
    }
}

試したこと

検索、chatGPTへの質問など色々調べましたが、全く同じケースが出てきませんでした。。

補足情報（FW/ツールのバージョンなど）

Version 14.2

Answer 1

自己解決しました。
結論、ForEachで生成しようとしていたオブジェクトを別のView()を作って分割し、ForEachでView()を呼ぶ形にしました。
以下ソースコードです。

// 省略

struct TurnsView: View {
    var turns: [Turns]
    
    var body:some View {
            ForEach (0 ..< (turns.count ?? 0)) { index in
                TurnsPanelView(turns: turns[index])
            } // ForEach
        Text("")
    } // body
}

struct TurnsPanelView: View {
    var turns: Turns
    @State private var showingModal = false
    @State var selectIndex: Int = 0
    var body: some View {
 
// 省略

            Button(action: {
                self.selectIndex = turns.thisTurn
                self.showingModal.toggle()
            }) {
                Text("ターンの詳細を見る")
            }
            .tag(turns.thisTurn)
            .font(.system(size: 12))
            .frame( maxWidth: .infinity, alignment: .leading)
            .padding(.leading, 57)
            .foregroundColor(.blue)
            .fontWeight(.bold)
            .sheet(isPresented: $showingModal) {
                BattleModalView(infoText: turns.infoText)
            }
            
// 省略

        }
    }
}
// 省略

struct BattleModalView: View {
    @State var infoText: String
    var body: some View {
        
        ScrollView {
            
            Text(infoText)
                .font(.system(size: 8))
                .foregroundColor(.black)
                .fontWeight(.bold)
                .padding()
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        
    }
}