[ic-checkbox-group] - adding\changing checkbox options does not set checkbox props correctly

[ad9242]

💬 Description

There is logic in the componentDidLoad for ic-checkbox-group that does not get applied if the checkboxes inside are updated

How to recreate:

With the following code in React storybook

export const CheckOptionsDynamic = () => {
  const [checkOptions, setCheckOptions] = useState([]);

  const updateOptions = () => {
    setCheckOptions([
      { label: 'Item 1', value: 'Item 1'},
      { label: 'Item 2', value: 'Item 2'},
      { label: 'Item 3', value: 'Item 3'},
      { label: 'Item 4', value: 'Item 4'},
    ])
  }

  return (
  <>
    <IcCheckboxGroup label="What is your favourite coffee?" name="radio-group-1">
      {checkOptions.map((option, index) => (
        <IcCheckbox
          key={index + option.value}
          value={option.value}
          label={option.label}
        />
      ))}
    </IcCheckboxGroup>
    <br />
    <IcButton onClick={updateOptions}>Update</IcButton>
  </>
  ) 
}

<Canvas>
  <Story name="Dynamic loading">
    <CheckOptionsDynamic />
  </Story>
</Canvas>

1. go to the story
2. click on the "Update" button to make checkboxes appear
3. open browser dev tools
4. see that elements in the DOM have "undefined" values eg the input id & the label

There are also no examples or tests for changing the options rendered inside a checkbox group. Examples should be added to Storybook (possibly only React as more likely to be rendering slot content conditionally there, rather than using pure web components). Unit tests and Cypress tests should also be added.

There should already be similar examples in radio button.

[GCHQ-Developer-741]

Closed as part of #1865