ReactのuseStateにて、配列内の値を更新するにはどうすればよいでしょうか

Question

前提・実現したいこと

ReactのHooksを使用し、配列内のcountをonClickでインクリメントさせたいのですが、動きません。
クリック時に、配列内のcountを更新させるにはどのようにしたらよいでしょうか？
よろしくお願いいたします。

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

TypeError: array.map is not a function

該当のソースコード

export default () => {
  const [array, setArray] = useState([
    { id: 1, name: 'test1', count: 0 },
    { id: 2, name: 'test2', count: 0 },
    { id: 3, name: 'test3', count: 0 },
  ])
  const handleClick = () => {
    setArray(...array, { count: array.count + 1 })
  }
  return (
    <>
      {
        array.map((data, index) => (
          <Grid item sm={6} key={index}>
            <p>{data.name}</p>
            <Button color="default" onClick={handleClick}>{data.count}回</Button>
          </Grid>
        ))
      }
    </>
  )
}

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

Answer 1

setArray(...array, { count: array.count + 1 })のようにすると、セットされるものが単なるオブジェクトになってしまいます（もはやmapできません）。

いったんconcatで配列をコピーしてから、適切なインデックスにある要素を差し替える、というような実装が必要かと思います。

Comments

[Mrame]

回答ありがとうございます。
仰る通り以下のようにしたところ、思うような動作になりました。

const handleClick = (index) => {
const copy = array.concat()
copy[index].count = copy[index].count + 1
setArray(copy)
}