check box the status is not being updated its getting error

Question

i want to update my status when I click edit and open check box the status is not being updated its getting error.ie, if I click on the checkbox the status should be changing false to true.but its not working can anyone help me to get through it i am posting my code below please any one go through it:

 const [items, setItems] = useState([]);

  const getRoleData = () => {
    const baseURL = `${REACT_APP_SERVER_URL}/apis/permission/all`;
    axios.get(baseURL).then((response) => {
      console.log(response.data.data);
      setItems(response.data.data);
    });
  };

  const changeEvent = (id) => {
    const newItems = items.map((c) => {
      if (c._id === id) {
        c.status = !c.status;
      }
      return c;
  
    
    });
    console.log(newItems)
    setItems(newItems);
    props.setPermission(newItems);
  };
  useEffect(() => {
    getRoleData();
  }, []);

  const checkPermission = (permissionName) => {
    if (props.permission.length) {
      let perm = props.permission.find(
        (c) => c.permission_name === permissionName
      );
      if (perm) {
        return !!perm.status;
        
      }
    }
    return false;
  };
  return (
    <form className="userForm">
      <div className="form-group">
        <label for="roleName">Role</label>
        <input
          type="text"
          className="form-control"
          name="user_role"
          placeholder="Role"
          {...register("user_role", { required: true })}
        />
        {errors.user_role && (
          <p className="text-danger">role_name is required</p>
        )}
      </div>
      <div className="form-group">
        <label for="description">Desciption</label>
        <input
          type="text"
          className="form-control"
          name="description"
          placeholder="Description"
          {...register("description", { required: true })}
        />
        {errors.description && (
          <p className="text-danger">description is required</p>
        )}
      </div>

      <div className="inputs">
        {items
          .map((item, index) => (
            <div>
              {item.status}
              <input
                className="form-check-input"
                onChange={(e) => changeEvent(item._id)}
                checked={
                  checkPermission(item.permission_name)
                    ? item.status
                    : !item.status
                }
                type="checkbox"
                id={`permission-${index[2]}`}
              />
              <label
                className="form-check-label ms-1"
                for={`permission-${index}`}
              >
                {item.permission_name}
              </label>
            </div>
          ))}
      </div>
      <div className="form-group"></div>
      <div className="inputs" style={{ marginLeft: "-120px" }}>
        <label className="custom-control-label" for="customSwitch1">
          Active
        </label>
        <Switch
          className="dragSwitch"
          name="active"
          checked={props.status}
          onChange={(e) => props.setActive(!props.status)}
        />
      </div>

      <div className="form-group mt-4">
        {!props.viewItem && props.view && (
          <Button
            onClick={handleSubmit(props.submitEditHandler)}
            variant="contained"
            className="btn1"
          >
            {props.editItem ? "Update" : "Add"}
          </Button>
        )}