Layout labels use ambiguous target in `for` attribute

Layouts like

{
  grow: true,
  type: 'value',
  label: 'group name',
  editable: editable,
  value: data.group_name,
  component: {
    Text: {
      variant: 'standard',
    },
  },
}

lead to <label>s with for="input" instead of a unique id for the related form control. Using screen.getByLabelText then fails with:

TestingLibraryElementError: Found a label with the text of: group name, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.

added bug label

Found the problem in ContainerControl.tsx > ValueFormControl:

        <InputLabelWithAdornments shrink htmlFor='input'>
          {label}
          {labelActions}
        </InputLabelWithAdornments>
      )}
      <Stack direction='row' width='100%'>
        {children}
      </Stack>

We need a unique id for the htmlFor and the id attribute of the actual value element (cf. useID). The actual element is inside children. Can we put the id into <Stack>? Otherwise we have to insert it into the children somehow.

The id referencd in a for/htmlFor attribute must be on the form control element itself, not on a container. I don't see a direct way to accomplish that with the current setup.

Only "labelable" elements (<button>, <input>, <meter>, <output>, <progress>, <select>, and <textarea>) shall be referenced by a label.