如何向一个状态添加多个复选框

<input type="checkbox" id="checkbox1" value="option1">
<label for="checkbox1">选项1</label>

<input type="checkbox" id="checkbox2" value="option2">
<label for="checkbox2">选项2</label>

<input type="checkbox" id="checkbox3" value="option3">
<label for="checkbox3">选项3</label>

import React, { useState } from "react";

function CheckboxGroup() {
  const [checkboxes, setCheckboxes] = useState([]);

  const handleCheckboxChange = (e) => {
    const value = e.target.value;
    if (checkboxes.includes(value)) {
      setCheckboxes(checkboxes.filter((item) => item !== value));
    } else {
      setCheckboxes([...checkboxes, value]);
    }
  };

  return (
    <div>
      <label>
        <input type="checkbox" value="option1" onChange={handleCheckboxChange} />
        选项1
      </label>
      <label>
        <input type="checkbox" value="option2" onChange={handleCheckboxChange} />
        选项2
      </label>
      <label>
        <input type="checkbox" value="option3" onChange={handleCheckboxChange} />
        选项3
      </label>
    </div>
  );
}

<div id="checkboxGroup"></div>

<script>
  const checkboxGroup = document.getElementById("checkboxGroup");

  const options = ["选项1", "选项2", "选项3"];

  options.forEach((option) => {
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.value = option;
    checkbox.addEventListener("change", handleCheckboxChange);

    const label = document.createElement("label");
    label.appendChild(checkbox);
    label.appendChild(document.createTextNode(option));

    checkboxGroup.appendChild(label);
  });

  function handleCheckboxChange(e) {
    const value = e.target.value;
    // 处理复选框状态的变化
  }
</script>