How to filter data when saved in local state?

I have an array of sections every section has an options array,
and have a maximum of options selected,

Let say

Section ‘Drinks’ has a max option 1

So I can just select one option from this section.

Section ‘Potatoes’ has a max option 2

Here I can check two options from this section.

So I have an array of sections and his options object,
Like this:

{
    idOfExtra: 44
    maximum_options: 1
    minimum_options: 1
    name: "drinks"
    radioData: [
        {
         calories: null,
         id: 245,
         maximum: 100,
         name: "Miranda orange",
         price: "0.00",
         price_unit: "USD",
        },
        {…}, {…} // other options
    ], 
}

So the issue is I want to set those options in an array named selectedOptionsQty to send to a backend, but before this, I want to check if I reached the max of Section or not And maximum option itself.

So The unique thing I can check about it is the idOfExtra ‘section id’ and compare it with the idOfExtra in the options object.

What I tried.
check if the currently selected option exists before in the checkbox array – that’s for style things “fill bg” -.

if the item is not selected before I push it to the two arrays (quantity, checkbox).
but before that, I check if the selected item has the same section id And the total quantity == maximum I show an alert for max reached options for this section.

otherwise, I push it to the arrays (quantity, checkbox).

But I got an unexpected behavior. Here’s Screen Record of current behavior.

Here’s a live example – Full Code