[Bug]: The radio-group/radio/field components work incorrectly

[HcySunYang]

Component

Radio

Package version

3.0.0-beta.70

@microsoft/fast-element version

2.0.0

Environment

ystem:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 Intel(R) Core(TM) i9-10900X CPU @ 3.70GHz
    Memory: 43.12 GB / 63.72 GB
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Current Behavior

The code is below:

import '@fluentui/web-components/radio-group.js';
import '@fluentui/web-components/radio.js';
import '@fluentui/web-components/field.js';

import {
  html,
  repeat,
  customElement,
  FASTElement,
  observable,
  Updates,
} from '@microsoft/fast-element';

import { setTheme } from '@fluentui/web-components';
import { webLightTheme } from '@fluentui/tokens';
setTheme(webLightTheme);

const template = html<MyComponent>`
  <fluent-radio-group orientation="vertical">
    ${repeat(
      (x) => x.radios,
      html`
      <fluent-field
        label-position="after"
      >
        <label slot="label">
          <span>${(x) => x.label}</span>
        </label>
        <fluent-radio
          ?disabled=${(x) => !!x.disabled}
          slot="input"
          value=${(x) => x.value}
          checked=${(x, c) => x.value === c.parent.currentValue}
        ></fluent-radio>
      </fluent-field>
      `
    )}
  </fluent-radio-group>

  <button @click="${(x) => x.updateData()}">Update data</button>
`;

const defaultData = [
  { label: 'Apple', value: 'apple', disabled: false },
  { label: 'Banana', value: 'banana', disabled: false },
  { label: 'Orange', value: 'orange', disabled: false },
];

@customElement({
  name: 'my-comp',
  template: template,
})
export class MyComponent extends FASTElement {
  @observable
  radios = defaultData;

  @observable
  currentValue = 'banana';

  updateData = async () => {
    this.radios = [
      { label: 'Apple', value: 'apple', disabled: false },
      { label: 'Banana', value: 'banana', disabled: true }, // change is here
      { label: 'Orange', value: 'orange', disabled: false },
    ]
    await Updates.next();
    this.radios = defaultData;
  }
}

I also provided a reproducible repo: https://github.com/HcySunYang/fluent-ui-radio-but-repro/tree/radio-group-bug, repro steps:

1. Clone the repo: https://github.com/HcySunYang/fluent-ui-radio-but-repro/tree/radio-group-bug
2. Run pnpm install
3. Run pnpm start

You will see the rendering result like below:

Then click on the "Update data" button, expected result: the radio "banana" should stay selected.

Expected Behavior

the radio "banana" losts its selection state

Reproduction

https://github.com/HcySunYang/fluent-ui-radio-but-repro/tree/radio-group-bug

Steps to reproduce

1. Clone the repo: https://github.com/HcySunYang/fluent-ui-radio-but-repro/tree/radio-group-bug
2. Run pnpm install
3. Run pnpm start

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.