When check box filter clicked, it is re-rendered

When check box filter is checked, It calls filter api.
and jobInfo data is fetched.
I wanna filter multiple values. filter A and B,C at the same time.
But the problem is
When jobInfois fetched, checkbox component is re-rendered, and all the checked value
is unchecked automatically. So I can filter only one of them among A,B,C.
even I wrapped CheckboxFilter component with memo.
If there's any idea to solve it, I'd be appreciated.

const JobList = memo((props) => {
  const {jobInfo, filters} = useContext(JobInfoContext);

  //filters
  let filter = useRef([]);

  let info;
  let showTable;
  if (jobInfo['data']) {
    info = jobInfo['data'].map((info) => info);
    showTable = info.map((info) => (
      <TableRow key={uuid()}>
        <TableCell component="th" scope="row">
          {info.title}
        </TableCell>
      </TableRow>
    ));
  }

  const classes = useStyles();
  const option = ['A', 'B', 'C'];

  //체크박스 필터
  const handleCheck = (isChecked, item, label) => {
    if (isChecked && label === 'filter1') {
      filter.current.push(item);
    } else if (!isChecked && label === 'filter1') {
      let index = filter.current.indexOf(item);
      filter.current.splice(index, 1);
    }

    filters(filter.current);
  };

  return (
    <>
      <div className={styles.container}>
        <CheckboxFilter
          label="filter1"
          items={option}
          handleCheck={handleCheck}
        />
      </div>

      {/* Table */}
      <TableContainer component={Paper}>
        <Table className={classes.table} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>Post date</TableCell>
              <TableCell align="left">Title</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>{showTable}</TableBody>
        </Table>
      </TableContainer>
    </>
  );
});

export default JobList;

this is CheckboxFilter component.

const CheckboxFilter = memo(({label, items, handleCheck}) => {
  const classes = useStyles();

  const check = (e, item) => {
    handleCheck(e.target.checked, item, label);
  };

  return (
    <div>
      <div className={styles.checkBoxDiv}>
        <div className={styles.label}>{label}</div>
        {items.map((item) => (
          <FormControlLabel
            key={uuid()}
            className={styles.formControlLabel + ' box1'}
            value="start"
            control={
              <Checkbox
                className={classes.root}
                disableRipple
                color="default"
                checkedIcon={
                  <span className={clsx(classes.icon, classes.checkedIcon)} />
                }
                icon={<span className={classes.icon} />}
                inputProps=aria-label
                onChange={(e) => check(e, item)}
              />
            }
            label={item}
            labelPlacement="end"
          />
        ))}
      </div>
    </div>
  );
});

export default CheckboxFilter;