react native: passing the value of selected items to a function

I am trying to implement a MultipleSelectList from this library react-native-dropdown-select-list. And I am saving the selected items in the AsyncStorage of @react-native-async-storage/async-storage. I implemented 2 useState variables: first const [selected, setSelected] = useState([{}]); this is a list of {name : muscleGroup, value : id(s) of the exercise(s)} (this is the object that is saved in the list of viewDataList [see setExerciseViewLists ]). The other useState variable that I have implemented is:

const [selectedCount, setSelectedCount] = useState({  // a list of the number of selected exercises per muscleGroup
    Back: 0,
    Legs: 0,
    Chest: 0,
    .....
  });

The idea: when I call handleSelect (see handleSelect) from my MultipleSelectList I give it 2 parameters (val and item) val should be the id(s) of the exercise(s) because I defined it as this in my MultipleSelectList (see MultipleSelectList) and the item is one list item from viewDataList.

The problem is: val is for some reason, not an ID or a list of IDs, it is an anonymous function:

function (val) {
   var temp = _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(new 
   Set([].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(val),
   [value])));
   
   return temp;
}

(I don't really understand what this is). Any help would be appriciated.

MultipleSelectList

{viewDataList.map((item, index) => (
  <MultipleSelectList
    data={item.list.map(listItem => ({
      value: listItem.id,                 //here
    }))}
    save="value"
    setSelected={(val) => handleSelect(val, item)}
    selected={selected.map(item => item.value)}
  />
))}

handleSelect/Async saving

const handleSelect = async (val, item) => {

    setSelectedCount(prevState => ({
      ...prevState,
      [item.name]: prevState[item.name] + 1,   //item.name = muscleGroup
    }));

    setSelected(prevState => ([
      ...prevState,
      {
        name: item.name,
        value: val                             //val should be the ID(s)
      },
    ]));

    try {
      await AsyncStorage.setItem('selected', JSON.stringify([
        ...selected,
        {
          name: item.name,
          value: val,
        }
      ]));

      await AsyncStorage.setItem('selectedCount', JSON.stringify({
        ...selectedCount,
        [item.name]: selectedCount[item.name] + 1,
      }));

    } catch (e) {
      console.e('Error saving data to AsyncStorage:', e);
    }
};

setExerciseViewLists

const setExerciseViewLists = () => {
    let list = [];

    list.push(
      {.....},
      {
        num: 3,
        name: "muscleGroup",
        list: [{.....}, { id: "123", exercises : "somthing" }, {.....}]
      },
      {.....},
    );

  setViewDataList(list);
};

The issue is not with your data but with the setSelected prop for which you are sending a custom function handleSelect. But if you see the library's documentation, it is clearly mentioned like setSelected is for For Setting the option value which will be stored in your local state. So you can only store the selected values in the local state. The code should be like below inside the component.

const [selectedValues, setSelectedValues] = useState();

return <MultipleSelectList
    data={SOME_DATA}
    save="value"
    setSelected={setSelectedValues}
  />