Should select the active checkboxes only

This is my code.

<div className="modal-body">
                  <div className="modal-body-left">
                    <ul className="list filter-list">
                      {globalFilter &&, index) => (
                          className={`item ${isActive === index ? "active" : ""}`}
                          onClick={() => handleClick(index, data)}
                  <div className="modal-body-right">
                    <ul className="list category-filter-list">
                      {subCategoryData &&, index) => (
                        <li className="item" key={index}>
                            <Checkbox id={data + index} label={data}></Checkbox>
                        </li>`Preformatted text`

modal-body-right is dependent on click of modal-body-left and i have multiple checkboxes in there but when choose item one from left panel then check one checkbox one of them, then it will select all the checkboxes at position 1

please provide the smallest amount of code needed to reproduce the issue, maybe a codepen or something with that code