Custom checkbox works incorrect

I'm making custom checkbox and there is a problem. When I'm selecting bottom checkbox, it gets selected only first one. I think there is a problem with styles, but i'm not sure. I have recreated it in sandbox, could you please check it 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=
          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;
  }
}