Реакция: потери значений ref

Я использую два компонента, и я использую этот шаблон: дочерний компонент должен оставаться изолированным как можно больше - он обрабатывает собственную ошибку проверки. Родительский компонент должен проверять наличие ошибок, которые имеют зависимости между дочерними элементами. Итак, в моем случае: поле password и password confirmation.

Вот мой код:

a) SignUp (родительский)

Установка начального состояния.

 constructor() {
     super();

     this.state = {
         isPasswordMatching: false
     };
 }

В методе render() я выводил свой дочерний компонент. Через prop под названием callback Я распространяю метод isPasswordMatching(), связывая родительский this. Цель состоит в том, что метод может быть вызван в дочернем компоненте.

<TextInput
    id={'password'}
    ref={(ref) => this.password = ref}
    callback={this.isPasswordMatching.bind(this)}
    // some other unimportant props
/>

<TextInput
    id={'passwordConfirm'}
    ref={(ref) => this.passwordConfirm = ref}
    ...

isPasswordMatching() метод проверяет, соответствуют ли пароли (через refs this.password и this.passwordConfirm), а затем обновляется состояние. Обратите внимание, что этот метод вызывается внутри дочернего элемента (пароль или парольConfirm).

isPasswordMatching() {
    this.setState({
        isPasswordMatching: this.password.state.value === this.passwordConfirm.state.value
    });
}

b) TextInput (child)

Установка начального состояния.

constructor() {
    super();

    this.state = {
        value: '',
        isValid: false
    };
}

Выполняется проверка смазанности, и состояние обновляется.

onBlur(event) {

    // doing validation and preparing error messages

    this.setState({
        value: value,
        isValid: this.error === null
    });
}

Последние. Вызывается обратный вызов.

componentDidUpdate(prevProps) {
    if (prevProps.id === 'password' || prevProps.id === 'passwordConfirm') {
        prevProps.callback();
    }
}

Вопрос

Как-то мои ссылки теряются. Сценарий:

• Родительский компонент - это рендер
• Реализованные дочерние компоненты
• Я вхожу в одно из полей ввода и выхожу (это вызывает метод onBlur()) - состояние обновляется, дочерний компонент отображается
• componentDidUpdate() вызывается и prevProp.callback() также
• При переходе к методу isPasswordMatching() я выводя this.password и this.passwordConfirm - это объекты с ожидаемыми значениями ссылки. Обновляется состояние родительского компонента.
• Затем снова воспроизводятся все дети, компоненты обновляются, вызывается callback, но на этот раз this.password и this.passwordConfirm находятся null.

Я понятия не имею, почему ссылки потеряны. Должен ли я делать что-то по-другому? Заранее благодарю вас.