Checkbox tick only appearing when clicking white space

Question

I have the following Checkbox. The checkbox works in terms of functionality.
Issue is with how it shows up visually.

import ReactSVG from "react-svg";

const MyCheckbox = ({
  label,
  onClick,
  checked,
  id
}) => {
  return (
    <div className={styles.root}>
      <input
        id={id}
        type="checkbox"
        checked={checked}
        onChange={event => {
          onClick(event.target.checked)
        }}
      />
      <label htmlFor={id}>
        {label}
        <div className={styles.icon}>
          <ReactSVG
            src={"domain/imageName"}
          />
        </div>
      </label>
    </div>
  );
};

When I click it, only the border blue line shows up as per the image.

When I click some white space on the page, only then does the check box comes up as follows.

Why? I am expecting the tick to be visual the moment I click the checkbox.
Not to have to click some white space for tick to appear.

When I uncheck it, the tick goes away as expected. But the border color remains.

Again the border color only goes away if I click away to some white space.

Could I get some help as to what I am doing wrong? Thanks.

This is the styling for it.

$size: 1.375rem;

.icon {
  display: flex;
  align-items: center;
  height: $size;
  justify-content: center;
  left: 0;
  margin-left: -$size;
  position: absolute;
  top: 0;
  width: $size;
  visibility: hidden;
}

.root {
  display: block;
  padding-left: $size;
  position: relative;

  input[type="checkbox"] {
    display: block;
    left: 0;
    opacity: 0;
    position: absolute;

    &:hover + label {
      &::before {
        background-color: #fff;
        border-color: #006fcf;
      }
    }

    &:checked + label:hover {
      &::before {
        border-color: #006fcf;
      }
    }

    &:checked + label {
      &::before {
        background-color: #006fcf;
        border-color: #006fcf;
      }

      span {
        visibility: visible;
      }
    }
  }
}