有一个单选按钮组可重用组件，该组件应该能够设置所选的默认选项。
以下是组件的调用方式：

const App = () => {
  const drinks = [
    {
      label: "Coffee",
      name: "drinks-list"
    },
    {
      label: "Tea",
      name: "drinks-list"
    },
    {
      label: "Water",
      name: "drinks-list",
      disabled: true
    }
  ];

  const [selectedValue, setSelectedValue] = useState<String>(drinks[1].label);

  function radioGroupHandler(event: React.ChangeEvent<HTMLInputElement>) {
    setSelectedValue(event.target.value);
  }

  useEffect(() => {
    console.log(selectedValue);
  }, [selectedValue]);

  return (
    <PageLayout>
      <RadioButtonGroup
        label="Select your drink:"
        options={drinks}
        onChange={radioGroupHandler}
      />
    </PageLayout>
  );
};

export default App;

有一行用于设置状态：

const [selectedValue, setSelectedValue] = useState<String>(drinks[1].label);

在这种情况下，预期的行为是在呈现组件时检查第二个选项（Tea），但它不是这样工作的-它呈现了第一个选项。如果代码是这样的，我希望呈现第一个选项：

const [selectedValue, setSelectedValue] = useState<String>(drinks[0].label);

这是单选按钮组组件：

const RadioButtonGroup = ({ label, options, onChange }: IInputGroup) => {
  function renderOptions() {
    return options.map(({ label, name, disabled }: IOption, index) => {
      const shortenedOptionLabel = label.replace(/\s+/g, "");
      const optionId = `radio-option-${shortenedOptionLabel}`;

      return (
        <RadioButton
          value={label}
          label={label}
          key={optionId}
          id={optionId}
          name={name}
          disabled={disabled}
          defaultChecked={index === 0}
          onChange={onChange}
        />
      );
    });
  }
  return (
    <Fieldset>
      <Legend>{label}</Legend>
      <Wrapper>{renderOptions()}</Wrapper>
    </Fieldset>
  );
};

export default RadioButtonGroup;

下面是单选按钮：

const RadioButton = ({ label, id, disabled, ...rest }: InputElementProps) => {
  return (
    <Wrapper>
      <Radio id={id} type="radio" disabled={disabled} {...rest} />
      <Label htmlFor={id} disabled={disabled}>
        <span>{label}</span>
        {/* disabled && <DisabledIcon small /> */}
      </Label>
    </Wrapper>
  );
};

export default RadioButton;

也许在这个代码沙盒上更容易：https://codesandbox.io/s/custom-radio-button-group-forked-1do5u4?file=/src/App.tsx
知道什么是错误的吗？为什么当状态设置为useState<String>(drinks[1].label);时，默认情况下第二个选项没有选中？