I have many checkboxes, and use them to set table columns.
It’s look like

const [fields, setFields] = useState<Set<string>>(new Set(["name"]));

const handleChangeFilter = (event: ChangeEvent<HTMLInputElement>) => {
    if (fields.has(event.target.value)) {
        fields.delete(event.target.value)
    } else {
        fields.add(event.target.value)
    }
    setFields(fields)
};

{filters.map((field) => {
    return (<FormControlLabel control={<Checkbox onChange={(event) => {
handleChangeFilter(event) }} value={field} checked={fields.has(field)} />} label={ field } />)   
})}

and fields changes as expected but checkboxs doesn’t work.

I click and field add in fields but checkbox dosn’t change.

Am I need state control for every field, but there’re to many. I don’t try to use Map in useState is it good idea?