mui select wrap text to next line

Question

I'm using Material UI the select with checkbox, I have the following code the select component MenuItem is not wrapping the text with checkbox to next line in the UI for some reason. Any idea?

This is the code:

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

          <FormControl sx={{ width: '100%' }}>
            <Select
              id="valueAddedService"
              name="valueAddedService"
              tw="w-full"
              multiple
              displayEmpty
              MenuProps={MenuProps}
              value={values.valueAddedService ? values.valueAddedService : ''}
              defaultValue="Secure"
              renderValue={(selected) => {
                if (selected.length === 0) {
                  return <div tw="sm:text-sm">Select VAS</div>;
                }

                return selected.join(', ');
              }}
              onChange={(e) => {
                setFieldValue('valueAddedService', e.target.value, false);
              }}
            >
              {valueAddedService.map((data) => (
                <MenuItem
                  key={data}
                  name={data}
                  value={data}
                  style={{ whiteSpace: 'normal', wordBreak: 'break-all' }}
                >
                  <Checkbox
                    checked={
                      values.valueAddedService.findIndex(
                        (item) => item === data,
                      ) >= 0
                    }
                  />
                  <ListItemText primary={data} />
                </MenuItem>
              ))}
            </Select>
          </FormControl>