stopPropogation not working consistently in React

Question

I am working with 2 dropdown menus using stopPropogation to prevent the menu shifting up and down when items are checked and unchecked.

One menu works great but the other is still jumping up and down when checking and unchecking items, although I am confident that I'm using stopPropogation in the same way for both instances. I am wondering what I am doing wrong in the faulty dropdown menu that's causing this issue.

Working dropdown menu:

return (
    <div onClick={(e) => {
      e.stopPropagation();
    }}> 
      <FormControl
        variant="outlined"
        size="small"
        className={classes.formControl}
      >
        <InputLabel id="demo-mutiple-checkbox-label" align="left" margin="dense">
          Select Models
        </InputLabel>
        <Select
          multiple
          labelId="demo-mutiple-checkbox-label"
          label="SelectModels"
          value={modelIds}
          onChange={handleChange}
          renderValue={(selected) =>
            selected
              .map(
                (id) =>
                  deviceModelData.find((model) => model.alg_id === id).alg_name
              )
              .join(', ')
          }
          MenuProps={MenuProps}
          className={classes.rootSelect}
        >
          {deviceModelData.map((model, index) => (
            <MenuItem key={model.alg_id} value={model.alg_id}>
              <Checkbox checked={modelIds.includes(model.alg_id)} />
              <ListItemText primary={model.alg_name} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

Problematic dropdown menu:

return (
    <div
      onClick={(e) => {
        e.stopPropagation();
      }}
    >
      <FormControl
        variant="outlined"
        size="small"
        className={classes.formControl}
      >
        <InputLabel id="demo-mutiple-checkbox-label">Select Classes</InputLabel>
        <Select
          labelId="demo-mutiple-checkbox-label"
          label={label}
          id="demo-mutiple-checkbox"
          multiple
          value={classIds}
          onChange={handleClassIdsChange}
          renderValue={(selected) =>
            selected
              .map((id) => marketplaceModelClasses[id].original_label)
              .join(', ')
          }
          MenuProps={MenuProps}
        >
          {allClassIds.map((classId) => {
            return (
              <MenuItem key={classId} value={classId}>
                <Checkbox
                  value={classId}
                  checked={classIds.indexOf(classId) > -1}
                />
                <ListItemText
                  primary={marketplaceModelClasses[classId].original_label}
                />
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
    </div>
  );
}