How to render checkbox from an array of array in React

I am new to react. I am working on a project where I want to render checkboxes from an array that is coming from API response, where based on the phrase matching I have to group the options. i.e if item contains "BLR" it will group to all "BLR-" items

API response is : ["AU-COPS", "BLR", "BLR- End to End ACT testers", "BLR-ACT-FUNCTIONAL", "BLR-ACT-POLICY", "BLR-ASM", "BLR-ASM-FUNCTIONAL", "BLR-ASM-POLICY", "BLR-DAG", "BLR-DEMO", "BLR-MANAGED", "BLR-QI", "BLR-TOOLS", "DE-COPS", "demo-1", "demo-2", "ES- Audit (S&Q)", "ES- Managed", "ES-COPS", "ES-Functional (managed/unmanaged)", "FR- Audit (S&Q)", "FR- Functional (managed/unmanaged)", "FR-COPS", "FR-Managed", "IT- Functional (managed/unmanaged)", "IT- Managed", "IT-Audit (S&Q)", "IT-COPS", "JP-COPS", "SEA-MANAGED", "SJO-COPS", "UK-COPS" ]

For grouping, I have created one more array var ch = ["BLR", "UK", "IT", "ES", "SEA"]

my code to render check box:

<div>
                                        {
                                            listOfCheckboxes && checkBoxHeading.map((item, index) => {
                                                return (
                                                    <>
                                                        <h8>{item}</h8>
                                                        <div key={index}>
                                                            {listOfCheckboxes.filter((childItem, childIndex) => {
                                                                if (childItem.includes(item))
                                                                    return (
                                                                        <div key={childIndex}>
                                                                            <label htmlFor={childItem}>{childItem}</label>
                                                                            <input
                                                                                type="checkbox"
                                                                                id={childItem}
                                                                                name={childItem}
                                                                                value={childItem}>

                                                                            </input>

                                                                        </div>
                                                                    );
                                                            }
                                                            )}
                                                        </div>
                                                    </>
                                                );
                                            })
                                        }
                                    </div>

Please help me guys!!

The output I am getting is listed all items without checkboxes.