Кастомный мультиселектор в реакцию с родным

Question

Я пытаюсь создать собственный мультиселектор, который возвращает массив всех выбранных значений. Мультиселектор - это родительский компонент, который должен выполнять обновление, и он имеет дочерние компоненты, которые отображают опции, которые нужно выбрать.

Кажется, что компоненты представления работают, но когда я пытаюсь передать мультиселектор в форму, представленный массив является записью всех нажатий - он имеет повторяющиеся значения и невыбранные значения.

Я предполагаю, что это связано с тем фактом, что я не знаю, где правильно вызывать prop.onChangeValues, так как контейнеры SelectionBox работают должным образом, что, как я предполагаю, означает, что массив 'values' обновляется при печати как следует.

Как правильно вызывать prop.onChangeValues, чтобы он корректно обновлялся? И почему это не работает?

Родительский мультиселекторный компонент

Вызов props.onChangeValues, как показано ниже, не работает. Я также попытался добавить props.onChangeValues в качестве обратного вызова к setValues в обоих условиях setSelections, а также попытался useEffect, но ни одна из них не сработала, и useEffect помешал другим полям ввода текста в форме

export function MultiSelector(props) {
  const [values, setValues] = useState([]);

  const setSelections = child => {
    if (!values.includes(child.props.value)) {
      setValues([...values, child.props.value]);
    } else {
      setValues(values.filter(value =>
        value !== child.props.value));
    } 
   props.onChangeValues(values) 
};

  return (
    <View>
      <>
      <Text>{props.label}</Text>
      <View>
        {props.children.map(child => (
          <SelectionItem
            onPress ={()=>setSelections(child)}
            style={[
              (values.includes(child.props.value))
                ? Containers.activeSelectionBox
                : Containers.inactiveSelectionBox,
            ]}
            label={child.props.label}
            value={child.props.value}
          />
        ))}
     </View>
    </View>
  );
}

Дочерние компоненты / опции для выбора

function Item(props) {
  return (
    <View>
      <TouchableOpacity>
          <Text
          onPress={props.onPress(props.value)}
          style={props.style}>
          {props.label}
        </Text>
      </TouchableOpacity>
    </View>
  );
}

Затем я вызвал селектор в такой форме -:

export default class Form extends React.Component {
constructor(props){
  super(props)
  this.state =  {
    categories:[],
  }
}

handleCategoriesChange = (newCategory) => {
  this.setState({categories:[...this.state.categories, newCategory]})
}

render(){
 return(
    <View style={Containers.formInputBox}>
       <RadioSelector label="Choose categories" 
onChangeValues={this.handleCategoriesChange}>  
         <Item label="label 1" value="value 1"/>
           <Item label="label 2" value="value 2"/>
           <Item label="label 3" value="value 3"/>
           <Item label="label 4" value="value 4"/>
       </RadioSelector>
    </View>
  )}
}