Fix internal state consistency of control cards in controlled mode

packages/core/src/components/control-card/useCheckedControl.ts

@@ -22,12 +22,13 @@ import type { CheckedControlProps } from "../forms/controlProps";
  * Keep track of a control's checked state in both controlled and uncontrolled modes
  */
 export function useCheckedControl(props: CheckedControlProps) {
-    const [checked, setChecked] = React.useState(() => props.defaultChecked ?? false);
-    React.useEffect(() => {
-        if (props.checked !== undefined) {
-            setChecked(props.checked);
-        }
-    }, [props.checked]);
+    const [checkedStateForUncontrolledMode, setChecked] = React.useState(() => props.defaultChecked ?? false);
+
+    // If the checked prop is passed, this input is in "controlled mode" and
+    // should always reflect the value of the controlled prop. Any internal
+    // state tracked for "uncontrolled mode" should be ignored.
+    const checked = props.checked ?? checkedStateForUncontrolledMode;
+
     const onChange = React.useCallback<React.ChangeEventHandler<HTMLInputElement>>(
         e => {
             setChecked(c => !c);