React Materialize checkbox

Disclaimer: New to development and this is my first s/o post.

I'm using materialize on a react project with a filter that has checkboxes. I currently have the checkbox component returning as:

return (
    <div className={this.props.type} >
      <form>
        <input
              type={this.props.type}
              value={label}
              checked={isChecked}
              onChange={(e) => this.toggleCheckboxChange(e)}
            />
        <label>
          <input
            type={this.props.type}
            value={label}
            checked={isChecked}
            onChange={(e) => this.toggleCheckboxChange(e)}
          />
         {label}
        </label>
      </form>
    </div>
)

It renders with the checkbox and the label next to it. However, if I remove the input tag that's outside of the label tag like so:

return (
    <div className={this.props.type} >
      <form>
        <label>
          <input
            type={this.props.type}
            value={label}
            checked={isChecked}
            onChange={(e) => this.toggleCheckboxChange(e)}
          />
         {label}
        </label>
      </form>
    </div>
)

the checkbox disappears but the text is still clickable. The component is class based so it maintains its state of being checked or unchecked.

Any ideas as to why it behaves this way?