Update the array based on Checkbox status in ReactJs

I want to update the filterCandidates array based on the total experience of the candidate when the selected checkbox is checked and remove the candidate data from the array when unchecked, below is the code snippet

import { useState } from "react";

function ExperienceFilter({ candidates }) {
  const [filteredCandidates, setFilteredCandidates] = useState([]);
  const experienceOptions = [
    { value: "1-2", label: "1-2 Years" },
    { value: "3-4", label: "3-4 Years" },
    { value: "5-6", label: "5-6 Years" },
    { value: "7-8", label: "7-8 Years" },
    { value: "9-10", label: "9-10 Years" },
  ];

  function handleChange(e) {
    const { value, checked } = e.target;
    const experiencedCandidates = candidates.filter(
      (candidate) => candidate.totalExperience == value
    );

    if (checked) {
      setFilteredCandidates([...filteredCandidates, experiencedCandidates]);
    }

    if (!checked) {
      setFilteredCandidates((prev) => prev.totalExperience != value);
    }
  }
  return (
    <div>
      <div class="flex flex-col space-y-3 bg-green-600  px-5 pr-20 py-10">
        <div>Years of Experience</div>
        {experienceOptions.map((option, index) => (
          <label key={index}>
            <input
              type="checkbox"
              value={option.value}
              name={option.label}
              onChange={handleChange}
            />
            {option.label}
          </label>
        ))}
      </div>
    </div>
  );
}

export default ExperienceFilter;