My checkbox does not stay checked once clicked (styling checkbox with css)

I am using React and pure CSS to create a checkbox list and style them.

Without styling my checkbox works perfectly, it stays checked and registers the right value.

However, when I add the styling, if I click on a checkbox, the "check" does not stay. Basically, if I hove ron the checkbox the "check" appears, but if I click it, the "check" does not persists.

My checkbox component

import React from 'react';
import '../mystyles/Dropdown.css'


function Jurisdictions(props) {
  const [selectedOpts, setSelectedOpts] = React.useState(new Set());

  function handleChange(event) {
    const value = event.target.value;
    const checked = event.target.checked;

    if (checked) {
      selectedOpts.add(value);

    } else {
      selectedOpts.delete(value);
    }

    setSelectedOpts(new Set(selectedOpts));
    props.onChange && props.onChange(Array.from(selectedOpts.values()));
  }

  return (
    <div className="dropdown-jurisdictions">
      {props.options.map((opt) => (
        <label className="item-list" key={opt}>
          {opt}
          <input
            type="checkbox"
            name="opts"
            value={opt}
            onChange={handleChange}
            className="my-checkbox"
          />
        </label>
      ))}
    </div>
  )
}


export default Jurisdictions;

My CSS styling - Dropdown.css

.dropdown-jurisdictions {
  overflow-y: auto;
  overflow-x: none;
  height: 170px;
  width: 300px;
  text-align: left;
  color: #3D5A80;
}




.my-checkbox {
  display: none;
}


label {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  font-size: 16px;
  line-height: 20px;
  margin: 5px;
}
label:before {
  line-height: 20px;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #666666;
}

input[type=checkbox]:checked + label:before,
label:hover:before {
  content: "\2713";
  color: #666666;
  text-align: center;
  line-height: 16px;
}

I am pretty sure the problem is in my CSS but I cannot see the reason. Maybe because label is a not at the same level of my checkbox?