this.setStateのネストされた配列を更新します

私は昨日この質問をしましたが、それを読んだとき、私はそれをうまく表現していないことに気づきました。言い換えさせてください。私が達成しようとしているのは、1つの初期グループ（配列）を持ち、ユーザーがさらにグループを作成できるようにする（配列を追加する）ことです。そして、各グループで彼らは画像をアップロードすることができます。そして、アップロードされた画像ごとに、尊敬されているグループ内でプレビューを表示したいと思います。

上の画像は最初のグループ（空の配列）です。これは私の現在の状態で見ることができます。

this.state = {
    data: {
        groups: [[]]
    },
    preview: [[]]
}

グループをマッピングして、input ["file"]と、写真のプレビューを表示する右側のdivで構成される上の画像を表示します。このコードはそのように見えます。

groups.map((element, index) => {
    return <div className="form-group" key={index}>
        <label htmlFor={"photos-" + index} className="form-group-label">Upload Photo</label>
        <input
            id={"photos-" + index}
            type="file"
            style={{display: 'none'}}
            onChange={(e, index) => this.handlePhotoChange(e, index)}
        />
        <div className="form-group-previews">
            {
                preview[index].map((image, id) => {
                    return <img key={id} src={image} alt={id} />
                })
            }
        </div>
    </div>
})

私が問題を抱えているのは、ファイルと画像のプレビューを、尊重されている配列（グループとプレビュー）の同じインデックスに入れることです。現在、私のonChangeイベントハンドラーは次のようになっています。

handlePhotoChange(e, index) {
    e.preventDefault()

    let reader = new FileReader()
    let file = e.target.files[0]

    const { data, preview } = this.state
    const { groups } = data

    reader.onloadend = () => {
        this.setState({
            data: {
                ...data,
                groups: [...groups, [...index, file]] // error
            },
            preview: [...preview, [...index, reader.result]] // error
        })
    }

    reader.readAsDataURL(file)
}

this.setStateのspread演算子では不可能にしようとしていることはありますか？私が達成したいことはもっと次のように行われるようです

groups[index]: [...groups[index], file]
preview[index]: [...preview[index], reader.result]

しかし、そのようなものは構文エラーです。これを行うためのより良い方法はありますか？

解決**