select all checkbox and object value in reactjs

1import React, { useState, useEffect } from "react";
2import { Table } from "react-bootstrap";
3
4const App = () => {
5  const [users, setUsers] = useState([]);
6  const [selectedUser, setSelectedUser] = useState([]);
7
8  useEffect(() => {
9    setUsers(userData);
10  }, []);
11  // here you can see checked data
12  // all checked data are there in selectedUser
13  console.log(selectedUser);
14
15  const userData = [
16    { id: 1, name: "rag", email: "rag@gmail.com" },
17    { id: 2, name: "abc", email: "abc@gmail.com" },
18    { id: 3, name: "xyz", email: "xyz@gmail.com" },
19    { id: 4, name: "pqr", email: "pqr@gmail.com" }
20  ];
21
22  const handleChange = (e, data) => {
23    const { name, checked } = e.target;
24    if (checked) {
25      // if cheked and selectall checkbox add all fileds to selectedList
26      if (name === "allSelect") {
27        setSelectedUser(users);
28      } else {
29        // if cheked and specific checkbox add specific field to selectedList
30        setSelectedUser([...selectedUser, data]);
31      }
32    } else {
33      // if uncheked and selectall checkbox add remove all fileds from selectedList
34      if (name === "allSelect") {
35        setSelectedUser([]);
36      } else {
37        // if uncheked and specific checkbox remove specific field from selectedList
38        let tempuser = selectedUser.filter((item) => item.id !== data.id);
39        setSelectedUser(tempuser);
40      }
41    }
42  };
43
44  return (
45    <Table>
46      <thead>
47        <tr>
48          <th>
49            <input
50              type="checkbox"
51              className="form-check-input"
52              name="allSelect"
53              // allSelect selected when both length equal
54              // slecteduser === allUser
55              checked={selectedUser?.length === users?.length}
56              onChange={(e) => handleChange(e, users)}
57            />
58          </th>
59          <th>First Name</th>
60          <th>Email</th>
61        </tr>
62      </thead>
63      <tbody>
64        {users &&
65          users.map((data, index) => (
66            <tr id={index} key={index}>
67              <td>
68                <input
69                  type="checkbox"
70                  className="form-check-input"
71                  name={data.name}
72                  // checked when selectedUser contains checked object/filed/row
73                  checked={selectedUser.some((item) => item?.id === data.id)}
74                  onChange={(e) => handleChange(e, data)}
75                />
76              </td>
77              <td>{data.name}</td>
78              <td>{data.email}</td>
79            </tr>
80          ))}
81      </tbody>
82    </Table>
83  );
84};
85
86export default App;
87