ReactJS中多复选框过滤JSON数据并重新渲染的问题求助

我现在在做一个带复选框过滤功能的React组件，数据是从JSON文件里获取的，结构大概是这样的：

{
  "subjects": [
    {
      "año_cuatri": "1° 1°",
      "codigo": "1.1.1",
      "nombre": "Técnicas de Programación",
      "estado": "Promocionada",
      "año_cursada": "2024 2°C",
      "nota": 8,
      "tiene_apuntes": true,
      "link_apuntes": "111_tecnicas_de_programacion"
    },
    ...
  ]
}

目前渲染数据这部分是正常的，但一加上复选框过滤就出问题了——没法正确过滤数据并重新渲染结果，实在搞不定，想请大家帮忙看看！

我的组件代码是这样的：

const Materias_List = () => {
  const [dataApi, setDataApi] = useState([]);
  const [estadoChecked, setEstadoChecked] = useState({
    materia_promocionada: false,
    materia_pendiente: false,
    materia_cursando: false,
    materia_tiene_apuntes: false,
  });

  let api_subjects = [];
  let api_subjects_filtered = [];

  const fetchData = async () => {
    try {
      api_subjects = await degree_in_software_development.subjects;
      setDataApi(api_subjects);
    } catch (e) {
      console.log("Error al consumir API", e);
    } finally {
      console.log("FINALLY api_subjects", api_subjects);
      console.log("FINALLY dataApi", dataApi);
      console.log("Finalizó la carga");
    }
  };

  const handleOnChange = async (e) => {
    console.log("handleOnChange", e); 
    console.log("estadoChecked", estadoChecked);
    setEstadoChecked({
      ...estadoChecked,
      [e.target.name]: e.target.checked
    });
    console.log("estadoChecked", estadoChecked);
    console.log("e.target.checked", e.target.checked);
    console.log("e.target.value", e.target.value);
    console.log("e.target.name", e.target.name);
  };

  useEffect(() => {
    fetchData();
    console.log("useEffect", api_subjects);
    console.log("useEffect dataApi", dataApi);
  }, []);

  return (
    <>
      <div>
        <p>Filtrar por: </p>
        <input
          type="checkbox"
          id="materia_promocionada"
          name="materia_promocionada"
          value="Promocionada"
          onChange={handleOnChange}
        />
        <label htmlFor="materia_promocionada">Promocionada</label>

        <input
          type="checkbox"
          id="materia_pendiente"
          name="materia_pendiente"
          value="Pendiente"
          onChange={handleOnChange}
        />
        <label htmlFor="materia_pendiente">Pendiente</label>

        <input
          type="checkbox"
          id="materia_cursando"
          name="materia_cursando"
          value="Cursando"
          onChange={handleOnChange}
        />
        <label htmlFor="materia_cursando">Cursando</label>

        <input
          type="checkbox"
          id="materia_tiene_apuntes"
          name="materia_tiene_apuntes"
          value="tiene_apuntes"
          onChange={handleOnChange}
        />
        <label htmlFor="materia_tiene_apuntes">Tiene apuntes</label>
      </div>

      <div id="materias_container">
        <ul id="materias_lista">
          {dataApi.map((subject) => {
            return (
              <li key={subject.codigo}>
                <div className="materias__item">
                  <span className={`estado_${subject.estado.toLowerCase()}`}>
                    {subject.estado}
                  </span>
                  <h4>{subject.nombre}</h4>
                  {!subject.tiene_apuntes ? (
                    <p className="materias__item-detalle">
                      <span>Código: {subject.codigo}</span>
                    </p>
                  ) : subject.tiene_apuntes && subject.link_apuntes ? (
                    <p className="materias__item-detalle">
                      <span>Código: {subject.codigo}</span>
                      <span>
                        <a href={`${basePath}${subject.link_apuntes}`} target="#">
                           Apuntes
                        </a>
                      </span>
                    </p>
                  ) : null}
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
};

现在的问题就是，点击复选框后，数据不会被过滤，也不会重新渲染过滤后的结果，有没有大佬能指点一下我哪里错了呀？谢谢大家的时间！

内容来源于stack exchange