Попытка активировать функцию в ребенке от родного брата, пока работает только с одним ребенком

Question

Итак, у меня есть родительский компонент [PC] -> и дочерние / дочерние компоненты [SC]

[SC1] отображает и очищает данные, используя редукционные действия

[SC2] & [SC3] - это выпадающие меню, в которых отображаются элементы, из которых я также пытаюсь очистить значения. У них есть clearQuery реквизиты, принадлежащие сторонней библиотеке, которую я использую. Я могу получить доступ только к clearQuery из этих компонентов.

По сути, я пытаюсь вызвать действие clearQuery из компонента [SC1]

После некоторых исследований я решил использовать this.ref. Это сработало на [SC2]! Как только я сделал то же самое с [SC3], я получил ошибку onRef is not a function.

Вот как выглядит мой код

class Parent extends PureComponent {
  clear = () => {
    this.ref.clearValue();
  };

  render() {
    return (
      <View>
        <SiblingComponent1 clear={this.clear} />
        <SiblingComponent2 onRef={ref => (this.ref = ref)} />
        <SiblingComponent3 onRef={ref => (this.ref = ref)} />
      </View>
    );
  }
}

class SiblingComponent2 extends PureComponent {
  componentDidMount() {
    const { onRef } = this.props;
    onRef(this);
  }

  componentWillUnmount() {
    const { onRef } = this.props;
    onRef(null);
  }

  clearValue = () => {
    const { setQuery } = this.props;
    setQuery(null);
  };
}
class SiblingComponent3 extends PureComponent {
  componentDidMount() {
    const { onRef } = this.props;
    onRef(this);
  }

  componentWillUnmount() {
    const { onRef } = this.props;
    onRef(null);
  }

  clearValue = () => {
    const { setQuery } = this.props;
    setQuery(null);
  };
}

Может быть, я неправильно понимаю ссылки

Как мне решить эту проблему?

Спасибо!