Checkbox from material ui allows to pick just one element once it's open

Question

In project in react table I use filtering prop and it's operated via Checkbox modal which should allow to pick certain properties. The issue I face is that Checkbox allows to pick just 1 item at a time, so onClick it opens, then I can choose just 1 element, then it close, once I open it again it remembers previously picked thing but still allows me to pick just one. So if I had 10 elemnts to pick it would be a nightmare. Can You please check it and advise how to solve it ?

It how table is defined:

const columns: any[] = [
    {
        Header: useTranslationFunc('Status'),
        accessor: 'state',
        collapse: true,
        disableSortBy: true,
        Cell: (props: CellValue) => (
            <RenderTrainStatus statusType={props.cell.value} />
        ),
        Filter: MultiCheckBoxColumnFilter,
        filter: multiSelectFilterFunction,
    },
    {
        Header: useTranslationFunc('Nr składu'),
        accessor: 'trainId',
        collapse: true,
        Cell: (props: CellValue) => <div>{props.cell.value}</div>,
        Filter: MultiCheckBoxColumnFilter,
        filter: multiSelectFilterFunction,
    },

This is MulticheckBoxColumnFIlter and it's logic:

export const MultiCheckBoxColumnFilter: FC<ColumnProps> = ({
    column: { filterValue = [], Header, setFilter, preFilteredRows, id },
}) => {
    const [anchorEl, setAnchorEl] = useState(null);
    const theme = useTheme();
    const handleClick = (event: any) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = (event: any) => {
        setAnchorEl(null);
    };

    const options = useMemo(() => {
        const counts: any = {};
        preFilteredRows
            .filter((record) => record.values[id])
            .forEach((record: any) => {
                record = record.values[id];
                counts[record] = (counts[record] || 0) + 1;
            });
        return counts;
    }, [id, preFilteredRows]);

    const onChange = (e: any) => {
        const selectedItem = e.target.name.toString();
        if (filterValue && filterValue.includes(selectedItem)) {
            setFilter(filterValue.filter((v: string) => v !== selectedItem));
        } else {
            setFilter([...filterValue, selectedItem]);
        }
    };

    const setColor = (
        value: string,
        firstColor: PaletteColor,
        secondColor: PaletteColor
    ) => (value ? firstColor : secondColor).toString();

    return (
        <StyledSpan>
            <StyledFilterButton aria-haspopup="true" onClick={handleClick}>
                <FilterListIcon
                    htmlColor={setColor(
                        filterValue.length,
                        theme.palette.red,
                        theme.palette.black
                    )}
                />
            </StyledFilterButton>
            <StyledMenu
                id="customized-menu"
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={handleClose}
                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
                transformOrigin={{ vertical: 'top', horizontal: 'center' }}
            >
                <StyledDescriptionDiv>{Header}</StyledDescriptionDiv>
                <StyledContainerDiv>
                    {Object.entries(options).map(([option, count], i) => (
                        <StyledLabel key={i} htmlFor={option}>
                            <Checkbox
                                name={option}
                                id={option}
                                checked={filterValue.includes(option)}
                                onChange={onChange}
                                title={`${option} (${count})`}
                                size="small"
                                sx={{
                                    '&.Mui-checked': {
                                        color: '#FD5C01',
                                    },
                                }}
                            />
                            {option} ({count})
                        </StyledLabel>
                    ))}
                </StyledContainerDiv>
            </StyledMenu>
        </StyledSpan>
    );
};
enter code here

And here how it's rendered:

<StyledTableHeadRow
                                    key={idx}
                                    {...group.getHeaderGroupProps()}
                                >
                                    {group.headers.map((column, idx) => {
                                        return (
                                            <StyledTableHeader
                                                key={idx}
                                                isSorted={column.isSorted}
                                                key={column.id}
                                                {...column.getHeaderProps({})}
                                                style={{
                                                    whiteSpace:
                                                        !matches && 'unset',
                                                }}
                                            >
                                                <RenderHeaderContent
                                                    column={column}
                                                    idx={idx}
                                                />
                                            </StyledTableHeader>
                                        );
                                    })}
                                </StyledTableHeadRow>

const RenderHeaderContent = ({ column, idx }) => {
    return (
        <StyledHeaderContentWrapper>
            <StyledTitleAndSortedIconWrapper
                onClick={() => {
                    isDesktop && setClickedIndex(idx);
                    !column.isSortedDesc
                        ? setIsSorted(true)
                        : setIsSorted(false);
                }}
            >
                <span
                    {...column.getHeaderProps(
                        column.getSortByToggleProps(),
                        {
                            className: column.collapse ? 'collapse' : '',
                        }
                    )}
                >
                    {column.render('Header')}
                </span>
                <span>
                    {column.isSorted ? (
                        column.isSortedDesc ? (
                            <StyledArrowDownwardIcon />
                        ) : (
                            <StyledArrowUpwardIcon />
                        )
                    ) : (
                        ''
                    )}
                </span>
            </StyledTitleAndSortedIconWrapper>
            <span
                style={{
                    marginLeft: isDesktop
                        ? isSorted &&
                          idx === clickedIndex &&
                          acceptedSortingIndex.includes(clickedIndex)
                            ? '12px'
                            : '0px'
                        : null,
                }}
            >
                {columnsCount > 5 ? (
                    <StyledHeaderDivFlex>
                        {column.canFilter ? column.render('Filter') : null}
                    </StyledHeaderDivFlex>
                ) : (
                    <StyledHeaderDivBlock>
                        {column.canFilter ? column.render('Filter') : null}
                    </StyledHeaderDivBlock>
                )}
            </span>
        </StyledHeaderContentWrapper>
    );
};

Somehow Checkbox lost some of it's propertly like but I cannot figure out where I did wrong.