【React】クリックでチェックのオンオフの切り替えをする方法が知りたい

実現したいこと

React (tauri) でクリック時にチェックマークのオンオフを切り替える機能を実装したいです。

発生している問題・分からないこと

State の更新時に再レンダリングが走らないようで、チェックマークのオンオフが切り替わりません。
該当部分は以下です。

typescript

1{imgCheckings[idx] ? <CheckCircleIcon size={48} /> : <IssueDraftIcon size={48} />}

クリック時に imgCheckings[idx] の値が反転してそれに応じたチェックマークが表示されることを期待しているのですが、初期値から更新されません。

該当のソースコード

import { useState } from "react"; import { invoke } from "@tauri-apps/api/tauri"; import "./App.css"; import { open } from "@tauri-apps/api/dialog"; import { CheckCircleIcon, IssueDraftIcon } from "@primer/octicons-react"; function App() { const [offset, setOffset] = useState(0); const [imgData, setImgData] = useState([]); const [imgCaptions, setImgCaptions] = useState([]); const [imgCheckings, setImgCheckings] = useState([]); async function select() { open({}).then(async file => { await invoke("select", { file: file }); }) setOffset(0); } async function next() { let newImgData: string[] = await invoke("next_image", { offset: offset }); let newImgCaptions = await invoke("next_image_caption", { offset: offset }); let newImgCheckings = Array(newImgData.length); newImgCheckings.fill(true); setImgCaptions(newImgCaptions); setImgData(newImgData); setImgCheckings(newImgCheckings); setOffset(offset + 1); } async function check(idx: number) { let newImgCheckings = imgCheckings; newImgCheckings[idx] = !newImgCheckings[idx]; console.log(newImgCheckings); setImgCheckings(newImgCheckings); } return ( <div> <div className="col"> <div className="container"> <button type="submit" onClick={() => { select(); }}>Select DB file</button> <button type="submit" onClick={() => { next(); }}>Next</button> </div> </div> <div className="col"> <div className="image-area"> {imgData.map((src: string, idx: number) => { return <div className="image-container" onClick={() => { check(idx); }}> {imgCheckings[idx] ? <CheckCircleIcon size={48} /> : <IssueDraftIcon size={48} />} <img src={src} /> <div className="caption"> {imgCaptions[idx][0]} </div> <div className="caption"> {imgCaptions[idx][1]} </div> </div> })} </div> </div> </div> ); } export default App;

試したこと・調べたこと

上記の詳細・結果

再レンダリングは setState 後に走るという記事を踏まえてコードを見直しましたが、check 関数の最後で setState を行っているような。。となりました。

また、{imgCheckings[idx] ? <CheckCircleIcon size={48} /> : <IssueDraftIcon size={48} />} の部分を {true ? <CheckCircleIcon size={48} /> : <IssueDraftIcon size={48} />} などに書き直して表示の切り替えができる事自体は確認しました。

補足

特になし