react radio button doesn't work on the first click

Question

I have a radio button using pure css, but it doesn't work on first click, it only work on the second click onward, not sure it has to do with my react prop or not:

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

Use defaultChecked instead of checked={checked}.