React 多个复选框 取消选中按钮单击时的复选框

问：

我正在使用复选框来过滤反应中的数组 这是我的代码。

 const [selectedSubCats, setSelectedSubCats] = useState([]);
  const [subCategoryName,setSubCategoryName] = useState([])

{subCategories?.map((item, index) => (
              <div className="category-checkbox" key={index}>
                <CheckBoxButton
                  id={item.id}
                  name={item.name}
                  value={item.id}
                  onChange={(e)=>{
                    if (e.target.checked) {
                      setSelectedSubCats([...selectedSubCats, e.target.value]);
                      setSubCategoryName([...subCategoryName,e.target.name])
                    } else {
                      const newArr = selectedSubCats.filter((item) => item !== e.target.value);
                      setSelectedSubCats(newArr);
                     const namesArr = subCategoryName.filter((item) => item !== e.target.name)
                     setSubCategoryName(namesArr)
                    }

                  }}
                  text={item.name}
                />
              </div>
            ))}

我还将选定的子类别打印为数组

 {subCategoryName && (subCategoryName.map((name,index)=>(
                 <div key={index}>
                  <button style={{border:'none',padding:'10px 15px'}} type='submit'>{name}<AiOutlineClose/></button>
                 </div>
                 )))}

有没有办法通过传递 id 从这些按钮中取消选中选定的复选框？或调用函数。我不希望取消选中所有复选框，只能从选定的按钮中取消选中