React checkbox and select all doesn't work

I tried to build a list of projects, each with a checkbox for multi-selection. I also want to have a "select all" checkbox to select and de-select all the projects.

My problem is, whatever change I made to the state valuable, the checkbox just won't change (checked state). Can anyone please help?

''' import { Checkbox, ControlGroup } from "@blueprintjs/core"; import React, { useState } from "react";

const initProjectList = [ { "id": 1234567890123456, "name": "project 1", "description": "project description", "data file": "data_file.csv", "created date": "2022-04-12", "checked": false }, { "id": 1234567890123457, "name": "project 2", "description": "project description", "data file": "data_file.csv", "created date": "2022-04-12", "checked": true }, { "id": 1234567890123458, "name": "project 3", "description": "project description", "data file": "data_file.csv", "created date": "2022-04-12", "checked": false } ]

export default function ManageProject() {

const [projectList, setProjectList] = useState(initProjectList);

const handleSelectAll = () => {
    var tmpObj = projectList
    tmpObj.map((obj) => (
        obj.checked = !obj.checked
    ))
    setProjectList(tmpObj)
}
const toggleItem = (index) => {
    var tmpObj = projectList
    tmpObj[index].checked = !tmpObj[index].checked
    setProjectList(tmpObj)
}
const ProjectListPanel = () => (
        projectList.map((project, index) => {
            return (
            <ControlGroup key={"formGroup." + project.id}>
                <Checkbox key={"checkBox." + project.id} checked={project.checked} onChange={() => toggleItem(index)} />{project.id} {project.name} {project.description}
            </ControlGroup>
            )
        })
)
return (
    <div>
        <ControlGroup><Checkbox id="checkBox.SelectAll" onChange={()=>handleSelectAll()} /> Select all</ControlGroup>
        {<ProjectListPanel />}
    </div>
)

}'''