Выделение и отмена выбора компонента ячейки, не работающего в ScrollView

Question

Я встроил функцию группового чата в свое приложение, которое требует добавления членов группы из списка, такого как Whatsapp. Чтобы добавить те, которые я сделал, выбрав и отменив выбор ячейки человека, которого вы хотите добавить. Выбор Работает отлично, но отмена выбора не делает, состояние не обновляется, когда мне нужно отменить выбор.

Это компонент ячейки:

class CellComponent extends Component {
  constructor(props) {
    super(props);

    this.onPressAdd = this.props.onPressAdd;
    this.username = this.props.username;
    this.fullName = this.props.fullName;
    this.uid = this.props.uid;
    this.added = this.props.added;
    this.onDeselect = this.props.onDeselect;

    this.state = {
      addedMembers: [],
      added: this.added,   
    };
  }

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.added !== prevState.added) {
      return {
        added: nextProps.added,
      };
    }
    return null;
  }

render() {
    return (
        ...
        <View
          style={{
            flex: 2,
            // backgroundColor: 'purple',
            justifyContent: 'flex-end',
            alignItems: 'center',
            flexDirection: 'row',
          }}>
          {this.state.added ? (
            <TouchableOpacity
              onPress={() => {
                this.onDeselect(this.uid, this.username);
                this.setState({added: false}, () => {
                  console.log('State.Added: ', this.state.added); //Outputs "TRUE"
                });
              }}>
              <FontAwesome name="check" color="#000000" size={30} />
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              onPress={() => {
                this.onPressAdd(this.uid, this.username);
                this.setState({added: true});
              }}>
              <FontAwesome name="plus" color="#000000" size={30} />
            </TouchableOpacity>
          )}
        </View>
        ...
    )
}

Ниже приведен фрагмент родительского компонента. в котором присутствует ScrollView:

class Parent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      addedBuddies: [],
      friendsData: [],
    };
  }

  addBuddy = async (uid, username) => {
    var addedBuddies = this.state.addedbuddies;
    addedBuddies.push({uid: uid, username: username});
    this.setState({
      addedBuddies,
    });
  };

  deselectBuddy = async (uid, username) => {
    let addedbuddies = this.state.addedbuddies;
    const remove = {uid: uid, username: username};
    const result = addedbuddies.filter(buddy => buddy.uid !== remove.uid);

    this.setState({addedBuddies: result});
  };

  render() {
    return (
      <ScrollView showsVerticalScrollIndicator={false}>
        {this.state.friendsData.map((friend, index) => {
          if (
            this.state.addedbuddies.find(element => element.uid === friend.uid)
          ) {
            return (
              <CellComponent
                fullName={friend.data.fullName}
                username={friend.data.username}
                onPressAdd={this.addBuddy}
                onDeselect={this.deselectBuddy}
                uid={friend.uid}
                added={true}
              />
            );
          } else {
            return (
              <CellComponent
                fullName={friend.data.fullName}
                username={friend.data.username}
                onPressAdd={this.addBuddy}
                onDeselect={this.deselectBuddy}
                uid={friend.uid}
                added={false}
              />
            );
          }
        })}
      </ScrollView>
    );
  }
}

Помощь будет очень цениться