How can I change the way of selecting in a checkbox?

I'm using react and I have a checkbox created with Autocomplete where I select items. It is the same as that provided by material:

The problem is that the function "OnChange" runs only if I select the square. I would like it to work also by selecting the row. How can I do it? Here's my code:

<AutoComplete
          multiple
          id="checkboxes-tags-demo"
          options={props.roles}
          // disableCloseOnSelect
          // getOptionLabel={(options) => `${options}`}
          renderOption={(options, { selected }) => (
            <React.Fragment>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style=
                value={options}
                checked={selected}
                onChange={updateNewRoles}
              />
              {options}
            </React.Fragment>
          )}
          style=
          renderInput={(params) => (
            <TextField
              {...params}
              variant="outlined"
              label=""
              placeholder="Available Roles"
            />
          )}
        />
        <button type="submit" onClick={onSubmitChecked}>
          Save
        </button>