флажок прыжок в компоненте реакции

Question

У меня есть этот компонент-флажок

https://codesandbox.io/s/react-typescript-decbg

, где я его стилизовал, используя CSS, но обнаружил, что он прыгает, когда высота контейнера равна больше, чем окно просмотра

const Checkbox = ({
  checkboxId,
  defaultChecked,
  disabled,
  props
}: checkboxProps) => (
  <div className={"checkbox"}>
    <input
      id={checkboxId}
      type="checkbox"
      disabled={disabled}
      defaultChecked={defaultChecked}
      className={"hidden-box"}
      {...props}
    />
    <label htmlFor={checkboxId} className={"check--label"}>
      <span className={"check--label-box"} />
    </label>
  </div>
);