make changes based on PR

packages/components/src/spectrum/CheckboxGroup.tsx

@@ -1,10 +1,12 @@
+/* eslint-disable react/no-array-index-key */
 import { isElementOfType } from '@deephaven/react-hooks';
-import React, { ReactNode, useMemo, useState } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import {
  Checkbox,
  CheckboxGroup as SpectrumCheckboxGroup,
  SpectrumCheckboxGroupProps,
 } from '@adobe/react-spectrum';
+import { ensureArray } from '@deephaven/utils';
 
 export type CheckboxGroupProps = {
  children: ReactNode;
@@ -18,38 +20,24 @@ export function CheckboxGroup({
  children,
  ...props
 }: CheckboxGroupProps): JSX.Element {
- const [checkedState, setCheckedState] = useState<{ [key: number]: boolean }>(
- {}
- );
-
- const handleCheckboxChange = (index: number) => {
- setCheckedState(prevState => ({
- ...prevState,
- [index]: !prevState[index],
- }));
- };
-
  const wrappedChildren = useMemo(
  () =>
- React.Children.map(children, (child, index) => {
- if (isElementOfType(child, Checkbox)) {
- return React.cloneElement(child, {
- isSelected: true,
- value: `checkbox-${index}`,
- onChange: () => handleCheckboxChange(index),
- });
- }
- return (
+ ensureArray(children).map((child, index) =>
+ isElementOfType(child, Checkbox) ? (
+ React.cloneElement(child, {
+ key: `${index}-${String(child)}`,
+ value: `${index}-${String(child)}`,
+ })
+ ) : (
  <Checkbox
- isSelected={checkedState[index] || false}
- value={`checkbox-${index}`}
- onChange={() => handleCheckboxChange(index)}
+ key={`${index}-${String(child)}`}
+ value={`${index}-${String(child)}`}
  >
  {String(child)}
  </Checkbox>
- );
- }) || [],
- [children, checkedState]
+ )
+ ),
+ [children]
  );
 
  return (