How to organize useState and useQuery - Apollo/Graphql - reactjs

Question

I'm trying to pass data from useState([]) to the variables for filtering products. It works, but on very strange way.
When I click on a category checkbox, it is not checked, but the products are filtered, when I click on another category, again checkbox didn't checked, but already two values in the array useState([1,2]), and when I click again, the checkbox is checked, but is removed from the array useState([]).
const GET_PRODUCTS = gql`
query GetProducts($filterByCategory: [ID]) {
products(filters: {category: {id:{in: $filterByCategory}}}) {
....
}
}
`
const VacanciesPage = () => {
const [selectCategories, setSelectedCategories] = useState([]);
const getSetSelectedCategories = (category) => {
console.log(category);
if(selectCategories.includes(category)){
setSelectedCategories(selectCategories.filter(item => item != category));
return;
}
setSelectedCategories([...selectCategories, category]);
}
useEffect(() => {
console.log(selectCategories);
},[selectCategories]);
const { loading, error, data } = useQuery(GET_PRODUCTS, {
variables: { "filterByCategory": selectCategories},
});
if (loading) return null;
if (error) return `Error! ${error}`;
const { products, categories } = data;
return(
{categories.data.map(category => (
<label key={category.id} className="inline-flex items-center mt-3 mr-3">
<input type="checkbox" className="w-5 h-5" value={category.id} onChange={e => getSetSelectedCategories(+e.target.value)}/><span className="ml-2 text-gray-700">{category.attributes.name}</span>
</label>
))}
);
}

Answer 1

I completely rewrote the code, moved the variables to a separate function and everything finally worked.
const [selectedCategories, setSelectedCategories] = useState([]);
const [searchStatus, setSearchStatus] = useState(false);
useEffect(() => {
console.log(selectedCategories);
},[selectedCategories]);
const { loading, error, data } = useQuery(GET_PRODUCTS);
const { loading: loadingCategories, error: errorCategories, data: categories } = useQuery(GET_CATEGORIES);
const [ getFilteredProducts,
{ loading: filterLoading, error: filterError, data: filteredProducts }
] = useLazyQuery(FILTER_PRODUCTS_QUERY);
if (loading || loadingCategories || filterLoading) return "Loading";
if (error || errorCategories || filterError) return `Error! ${error}`;
const { products: allProducts } = data;
const { categories: allCategories } = categories;
const clearSearch = () => {
setSelectedCategories([]);
setSearchStatus(false);
};
const searchProducts = () => {
let filter = {};
setSearchStatus(true);
if (Object.keys(filter).length === 0) {
if (!selectedCategories) {
setSearchStatus(false);
return;
}
}
getFilteredProducts({
variables: {
filterByCategories: selectedCategories
? selectedCategories
: allCategories.data.map((category) => category.id),
},
});
};
const dataset = searchStatus && filteredProducts ? filteredProducts?.products : allProducts;