Adding check limits to checkbox in reactjs

I have a react component with checkboxes that i am trying to set a limit for, I've tried following this answer https://stackoverflow.com/a/44539843/11147342, but I couldnt get it to run, the main component is itemlist.js, and the checkboxes come from checkbox.js, here is a live snippet of what i am trying to do, https://codesandbox.io/embed/zwvljovq5p?fontsize=14, the changes are made in checkbox.js, i commented out the changes since it makes the app crash.

Checkbox.js

import React from "react";
import "./Checkbox.css";

const Checkboxes = props => {
  const id = props.childId + props.childp;
  /* this.props = {
    currentData: [],
    limit: 2

  } */


/*
selectData(id, event){
     let isSelected = event.currentTarget.checked;
     if(isSelected){
         if(this.state.currentData.length<this.state.limit){
            this.setState({currentData : [...currentData, id]})
         }
     }
     else{
        this.setState({currentData :
         this.state.currentData.filter((item)=>id!==item)})
     }
}

 */
  return (
    <form className="form">
      <div>
        <h2>{props.title}</h2>
        {props.options &&
          props.options.map(item => {
            return (
              <div className="inputGroup">
                <input
                  id={id + item.name}
                  name="checkbox"
                  type="checkbox"
                  //   checked={this.state.currentData.indexOf(id + item.name) >= 0}
                  //  onChange={this.selectData.bind(this, id + item.name)}
                />
                <label htmlFor={id + item.name}>{item.name} </label>
              </div>
            );
          })}
      </div>
    </form>
  );
};

export default Checkboxes;

Itemlist.js

...

  <Checkboxes
                        key={index}
                        title={item.name}
                        myKey={index}
                        options={item.children}
                        childk={item.id}
                      />
...