переключатель реагировать не работает при первом нажатии

Question

У меня есть переключатель, использующий чистый css, но он не работает при первом щелчке, он работает только при втором щелчке, не уверен, что это связано с моим реактивом или нет:

const Radio = ({ id, name, value, checked, children }) => (
  <div className="radioBtn">
    <input type="radio" value={value} id={id} name={name} checked={checked} />
    <label className={"radio"} htmlFor={id}>
      <span className={"big"}>
        <span className={"small"} />
      </span>
      <span>{children}</span>
    </label>
  </div>
);

https://codesandbox.io/s/react-sass-34b8w

Answer 1

Используйте defaultChecked вместо checked={checked}.