Checkbox does not toggle when wrapping <Field/> is clicked

[romankoho]

Version:
@headlessui/react": "^2.2.7"

I am rendering a <Checkbox/> with <Label/> - both within a <Field/> component.
The Field has a padding. Between the checkbox and the label is a gap (flexbox).

My problem:
The checkbox only gets toggled, if I click exactly on the Checkbox or Label area but it does not change when I click the padding area of the <Field/>. Is this a bug or intended and could I somehow change this behavior?

interface CheckboxProps {
  renderLabel?: () => ReactNode
  defaultChecked?: boolean
  disabled?: boolean
  checked?: boolean
  onChange?: (state: boolean) => void
}

    <Field className={'flex items-center justify-start gap-2 rounded-md cursor-pointer transition-colors duration-300 px-4 py-2'}>
      <Checkbox
        defaultChecked={defaultChecked}
        checked={checked}
        disabled={disabled}
        onChange={handleChange}
        as={'div'}
        className={'focus:outline-none'}
      >
        {({ checked, disabled }) => (
          <div>
            {checked ? (
              <CheckSquareIcon weight={'fill'} className={'size-5'} />
            ) : (
              <SquareIcon className={'size-5'} />
            )}
          </div>
        )}
      </HeadlessUICheckbox>
      {renderLabel && <Label className={'truncate select-none cursor-pointer text-sm font-medium whitespace-nowrap'}</Label>}
    </Field>

Clicking in the green are (padding of <Field/>) does not work (also not the gap of the Flexbox). I have to exactly hit the icon or label. I want the whole element to be clickable.