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
