Error when trying to change MUI (Material UI) checkbox value via state and onChange in React/NextJS - reactjs

Question

The error is: TypeError: filters.brand.find is not a function
and it says that it happened here:
checked={
173 | filters.brand.find((item) => item === brand)
| ^
174 | ? true
175 | : false
176 | }
Below is what I'm trying to achieve:
I'm building an e-commerce site using NextJS and amongst other features, users can choose to view products by category or subcategory. On either of these pages, users can choose to refine the results even further using filters. One of these filters should allow the user to display only the items of a certain brand/s.
These brands are presented to the user as checkboxes. So a checked checkbox should mean "include this brand" otherwise do not:
<FormGroup>
{brands.map((brand) => (
<FormControlLabel
control={
<Checkbox
size="small"
name={brand}
checked={
filters.brand.find((item) => item === brand)
? true
: false
}
onChange={() => handleBrandChange(brand)}
/>
}
label={brand}
key={brand}
/>
))}
</FormGroup>
btw: I tried using "includes" instead of "find" above but still ran into the same problem.
The initial value for filter.brand comes from the URL's query string.
const { query, ...router } = useRouter();
const [filters, setFilters] = useState({
brand: query.brand ? (typeof query.brand === "string" ? [query.brand] : query.brand) : [],
});
I check if the query string has "brand", which could either come back as a string or an array. If it is there, I check its type. If it's a string, I set filter.brand's value to an array with that string inside otherwise I take it as is. If the query string does not have a brand, I assign filter.brand an empty array.
btw, I am leaving out most of the code that is of no relevance to this problem.
Below is how I tried to handle the change (when the user clicks on a brand checkbox):
const handleBrandChange = (brand) => {
const brandArray = filters.brand;
if (brandArray.find((item) => item === brand)) {
setFilters({ ...filters, brand: brandArray.filter((item) => item !== brand) });
} else setFilters({ ...filters, brand: brandArray.push(brand) });
};
and below is what should happen every time the state changes:
useEffect(() => {
const urlObject = {
query: {
category: query.category,
sortBy: filters.sortBy,
maxPrice: filters.maxPrice,
},
};
if (filters.brand.length > 0) urlObject.query.brand = filters.brand;
if (query.subcategory) {
urlObject.pathname = "/[category]/[subcategory]";
urlObject.query.subcategory = query.subcategory;
} else {
urlObject.pathname = "/[category]";
}
router.push(urlObject);
}, [filters, query.subcategory, query.category]);
Sorry for the messy question. I am not used to asking questions on here (this is only my second time), I have not been coding for that long and English is not my first language. Any help would be greatly appreciated.