() => {
  const values = ['communication', 'camouflage', 'temperature regulation', 'emotional balance'];
  const [checkedValues, setCheckedValue] = React.useState([values[0]]);

  const handleChange = ({ target }) => {
    setCheckedValue(prevCheckedValues => {
      if (prevCheckedValues.includes(target.value)) {
        return prevCheckedValues.filter(value => value !== target.value);
      } else {
        return [...prevCheckedValues, target.value];
      }
    });
  };

  return (
    <Fieldset label="What do chameleons primarily use their color-changing ability for? (multiple can apply)">
      {values.map((value, index) => (
        <div key={value} style={{marginBottom: '12px'}}>
          <Checkbox
            labelPlacement={props.labelPlacement}
            optionalLabel={props.optionalLabel}
            message={props.message}
            disabled={props.disabled}
            name="chameleon-color-changing"
            id={'chameleon-color-changing-' + index}
            value={value}
            label={value}
            checked={checkedValues.includes(value)}
            onChange={handleChange}
          />
        </div>
      ))}
      <div style={{marginTop: '24px'}}>Checked values: {JSON.stringify(checkedValues)}</div>
    </Fieldset>
  );
};