How to enable optional chaining -React - reactjs

Question

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 tried this but I'm getting the error
support for the experimental syntax 'optional chaining' isn't currently enabled.
import React, { useState, useEffect } from "react";
/* const userData = [{name: "Didem1"}, {name : "Didem2"}] */
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 } : user
);
setUsers(tempUser);
}
};
return (
<table className="table table-dark">
<thead>
<tr>
<th scope="col">
<input
type="checkbox"
className="form-check-input"
name="allSelect"
onChange={handleChange}
checked={
users.filter((user) => user?.isChecked !== true).length < 1
}
/>
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"
/* user?.isChecked || false */
name={user.name}
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;
So I installed react-scripts#3.3.0 and #babel/plugin-proposal-optional-chaining and now I am getting error:
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
I'm not sure what causes this. I would be glad if you help.