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

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