Why do we need an invisible input when we make a custom checkbox?

I am going to customize an checkbox.

Generally, we create it by adding an invisible input and control value with it. Here is my mock code.

import "./styles.css";
import { useState } from "react";

function Checkbox() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <label>
      <input
        type="checkbox"
        onChange={() => {
          setIsChecked(!isChecked);
        }}
      />
      <svg
        className={`checkbox ${isChecked ? "checkbox--active" : ""}`}
        aria-hidden="true"
        viewBox="0 0 15 11"
        fill="none"
      >
        ...
      </svg>
      Check me!
    </label>
  );
}

But I think we can do it without the invisible input. Here is my mock code.

function Checkbox() {
  const [isChecked, setIsChecked] = useState(false)

  return (
    <div
      className={`checkbox ${isChecked ? 'checkbox--active' : ''}`}
      onClick={() => { setIsChecked(!isChecked) }}
    >
      <svg .../>
      Check me!
    </div>
  )
}

Are there will be side effect when we use div instead of input. If we use an invisible input, we should align 100% with the custom icon.