Пользовательский флажок работает некорректно

Question

Я делаю пользовательский флажок, и есть проблема. Когда я выбираю нижний флажок, он выбирается только первым. Я думаю, что есть проблема со стилями, но я не уверен. Я воссоздал его в песочнице, не могли бы вы проверить это https://codesandbox.io/s/adoring-pine-hqxwt

<label htmlFor="checkbox">
    <div className="checkbox-container">
      <input
        className="checkbox-hidden"
        id="checkbox"
        type="checkbox"
        checked={checked}
        onChange={onchange}
      />
      <div className="checkbox-styled">
        <svg
          className="checkbox-icon"
          style={{ visibility: checked ? "visible" : "hidden" }}
          viewBox="0 0 24 24"
        >
          <polyline points="20 6 9 17 4 12" />
        </svg>
      </div>
    </div>
    <span>{label}</span>
  </label>


.checkbox-icon {
  fill: none;
  stroke: #177ff0;
  stroke-width: 2px;
}

.checkbox-container {
  display: inline-block;
  vertical-align: middle;
}
.checkbox-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  // clippath: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkbox-styled {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: salmon;
  border-radius: 3px;
  transition: all 150ms;
  border-radius: 1px;
  border: 1px solid #dbeaf4;
  background-color: transparent;
  :hover {
    border-color: #4da1ff;
  }
}

Answer 1

Все ваши флажки имеют одинаковые значения id и htmlFor. Каждой паре id и htmlFor нужны уникальные значения:

const Checkbox = ({ checked, onchange, label, id }) => (
  <label htmlFor={id}>
    <div className="checkbox-container">
      <input
        className="checkbox-hidden"
        id={id}
        type="checkbox"
        checked={checked}
        onChange={onchange}
      />
      <div className="checkbox-styled">
        <svg
          className="checkbox-icon"
          style={{ visibility: checked ? "visible" : "hidden" }}
          viewBox="0 0 24 24"
        >
          <polyline points="20 6 9 17 4 12" />
        </svg>
      </div>
    </div>
    <span>{label}</span>
  </label>
);

Пример использования:

<Checkbox
  id={`checkbox${idx}`}
  checked={idx === this.state.isChecked}
  onchange={() => this.toggleCheckbox(idx)}
  label={item}
/>