Uncaught ReferenceError: ref не определен

Question

Я новичок в React, и я впервые использую ссылки в реакции.

Я использую ссылки в реакции. У меня есть один родительский компонент "UserEducation.js" и дочерний компонент "EducationDetailsContainer"

Я передаю onRef в родительский компонент при вызове дочернего компонента. Но каждый раз, когда я получаю реф, не определено.

код из моего родительского компонента

<CollapsibleComponentUserProfile
        collapsibleTitle="Education"
        showAddButtow={false}
        onSaveClick={this.checkValidationsOnSave}
      >
        {/* <EducationEdit */}
        <EducationDetailsContainer  (my child component)
          onRef={ref => (this.educationReference = ref)}
          {...{
            rightHalf,
            classes,
            year,
            month,
            dropdown,
            leftHalf,
            fullWidth,
            allDropDownWidth,
          }}
          // onRef={ref => this.dummyFunction(ref)}
        />
        {console.log('hint2', this.educationReference)}
      </CollapsibleComponentUserProfile>

checkValidationsOnSave = e => {
    debugger;
    this.educationReference.checkForErrors();
  };

это жизненный цикл компонента в моем дочернем компоненте

 componentDidMount() {
    this.props.onRef(this);
  }
  // componentWillUnmount() {
  //   this.props.onRef(null);
  // }
  componentWillReceiveProps(nextProps) {
    this.props.onRef(this);
  }

Я объявил свою образовательную ссылку в состоянии также в родительском компоненте

      educationReference: '',
}

внутри конструктора this.educationReference = React.createRef();