实现仅在勾选列表项复选框时显示删除按钮的React功能

我正在尝试实现一个功能：渲染列表项、复选框和删除按钮，要求仅当勾选对应列表项的复选框时，才显示该列表项的删除按钮。以下是我的React代码实现：

React 代码实现 #

JavaScript 部分 #

const { StrictMode, useEffect, useState } = React;
const { createRoot } = ReactDOM;

// const getData = () => {
//   fetch("https://jsonplaceholder.typicode.com/todos")
//     .then((res) => res.json())
//     .then((data) => console.log([data]));
// };

const arr = ["Play Cricket", "Play Video Game", "Read Books", "Watch Movies"];

function App() {
  const [isChecked, setIsChecked] = useState([]);
  const [baseArr, setBaseArr] = useState(arr);

  // const handleDelete = () => {

  // }
  // useEffect(() => {
  //   getData();
  // });

  const isItemChecked = (item) => {
    return isChecked.includes(item);
  };

  const handleChecked = (e) => {
    let updatedList = [...isChecked];

    if (e.target.checked) {
      updatedList = [...isChecked, e.target.value];
    } else {
      updatedList.splice(isChecked.indexOf(e.target.value), 1);
    }
    setIsChecked(updatedList);
  };

  console.log("isChecked", isChecked);
  console.log("baseArr", baseArr);

  const handleDelete = (e) => {
    const filterValue = arr.filter((val) => val !== e);
    setIsChecked(isChecked.filter((val) => val !== e));
    setBaseArr(filterValue);
  };

  return (
    <div className="App">
      <ul>
        {baseArr.map((val, index) => (
          <li
            style={{ listStyleType: "none", display: "flex", gap: "20px" }}
            key={index}
          >
            <input
              type="checkbox"
              value={val}
              onClick={(e) => handleChecked(e)}
            />
            <h1>
              {val}{" "}
              {isItemChecked(val) && (
                <button
                  style={{
                    backgroundColor: "red",
                    width: "150px",
                    height: "50px"
                  }}
                  onClick={() => handleDelete(val)}
                >
                  Delete
                </button>
              )}
            </h1>
          </li>
        ))}
      </ul>
    </div>
  );
}

const root = createRoot(document.getElementById("root"));
root.render(<StrictMode><App /></StrictMode>);

CSS 部分 #

.App {
  font-family: sans-serif;
  text-align: center;
}

HTML 部分 #

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

内容的提问来源于stack exchange，提问作者Aatif Khan