How to enable optional chaining -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 tried this but I'm getting the support for the experimental syntax 'optional chaining' isn't currently enabled error.

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 TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined error. I'm not sure what causes this. I would be glad if you help.