Make a div work as a radio button with Styled Components in React

Having the following fiddle, it is a radio group functionality that works as radio group buttons. It works fine.

The problem comes when it is needed to be transformed in Styled Components to be used in React.

Here is the code:

const options = [
  {
    label: 'first',
    value: 'first',
    name: 'radio-group',
  },
  {
    label: 'second',
    value: 'second',
    name: 'radio-group',
  },
  {
    label: 'third',
    value: 'third',
    name: 'radio-group',
  },
];

const FakeRadioGroup = () => {
  return (
    <XSelectionBoxContainer>
      {options.map((option) => {
        return (
          <div key={option.label}>
            <Xlabel htmlFor={option.value}></Xlabel>
            <Xinput type="radio" name={option.value} value="1" id={option.value} />
          </div>
        );
      })}
    </XSelectionBoxContainer>
  );
};

And here are the components:

export const XSelectionBoxContainer = styled.div`
  background-color: #c5e043;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
`;

export const Xlabel = styled.label`
  background-color: #c5e043;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
`;

export const Xinput = styled.input`
  display: none;
  :checked {
    background-color: #241009;
  }
`;

It shows the elements but nothing happens when they are clicked. Any ideas what’s wrong?