How to Add Checkbox to Table -React

I want to add a checkbox to each row in the table I have already created. In addition, there should be a select all button and it should be able to select all rows.. I have tried this but all select part didn't work.

import React, { useState, useEffect } from 'react';

const UserTable = props => {

    const [users , setUsers] = useState([]) ;
    const userData = [props.users] ;

    useEffect(() => {
        setUsers(userData)
    },[]) ;

    const handleChange = (e) => {
        const {name , checked} = e.target ;

        if(name === "allSelect") {
            let tempUser = users.map(user => {
                return {...user,isChecked: checked}
            }) ;
            setUsers(tempUser) ;
        }
        else { 
            let tempUser = users.map(user => user.name === name ? {...user, isChecked: checked} : users);

            setUsers(tempUser) ;
        }
    }


    return (
        <table className="table table-dark">
            <thead>
                
                <tr>
                <th scope="col">
                    <input
                        type="checkbox"
                        className="form-check-input"
                        name = "allSelect"
                        onChange = {handleChange}
                    />Select All
                </th>
                    <th scope="col">Hostname</th>
                    <th scope="col">Username</th>
                    <th scope="col">Stop</th>
                    <th scope="col">Sleep</th>
                    <th scope="col">Start</th>
                    <th scope="col">Status</th>
                    <th scope="col">CPU Temperature(°C)</th>
                    <th scope="col">GPU Info</th>
                    <th scope="col">Edit/Delete</th>
                </tr>
            </thead>


            <tbody>
                {

                    props.users.length > 0 ? (
                        props.users.map(user => (

                            <tr key={user.id}>

                                <th scope="row">
                                    <input
                                        type="checkbox"
                                        className="form-check-input"
                                        checked = {user?.isChecked || false}
                                        onChange = {handleChange}
                                    />
                                </th>


                                <td>{user.name}</td>
                                <td>{user.username}</td>
                                <td><button onClick={() => props.editStopPC(user)} className="btn btn-danger">Stop</button></td>
                                <td><button onClick={() => props.editSleepPC(user)} className="btn btn-warning">Sleep</button></td>
                                <td><button onClick={() => props.editStartPC(user)} className="btn btn-success">Start</button></td>
                                <td>{user.status}</td>
                                <td>{user.cpu}</td>

                                <td>{user.info}</td>
                                <td className="center-align">
                                    <button
                                        className="btn btn-info"
                                        onClick={() => props.editRow(user)}>
                                        edit
                                    </button>

                                    <button
                                        className="btn btn-danger"
                                        onClick={() => props.deleteUser(user.id)}>
                                        delete
                                    </button>
                                </td>
                            </tr>
                        ))
                    ) : (
                        <tr>
                            <td colSpan={9}>{props.users[0]} No Users</td>
                        </tr>
                    )
                }
            </tbody>
        </table>
    )
};

export default UserTable;

I'm getting the support for the experimental syntax 'optional chaining' isn't currently enabled error. For user?.isChecked || false expression I have tried checked = user!==null ? user.isChecked : false but it didn't work. I am glad if you help

EDIT:

const [selected , setSelected] = useState([]) ;
    const userData = [props.users] ;

    useEffect(() => {
        setSelected(userData)
    },[]) ;

    const handleClick = (event, name) => {
        const selectedIndex = selected.indexOf(name);
        let newSelected = [];
        if (selectedIndex === -1) {
          newSelected = newSelected.concat(selected, name);
        } else if (selectedIndex === 0) {
          newSelected = newSelected.concat(selected.slice(1));
        } else if (selectedIndex === selected.length - 1) {
          newSelected = newSelected.concat(selected.slice(0, -1));
        } else if (selectedIndex > 0) {
          newSelected = newSelected.concat(
            selected.slice(0, selectedIndex),
            selected.slice(selectedIndex + 1)
          );
        }
        setSelected(newSelected);
      };

<th scope="col">
                    <input
                        type="checkbox"
                        className="form-check-input"
                        name = "allSelect"
                        checked={isItemSelected}
                        onChange={(event) => handleClick(event, this.name)}
                    />Select All

                </th>

if you're talking about using it this way, I get the error 'isItemSelected' is not defined no-undef.