Получить состояние дочернего компонента внутри ErrorBoundary на componentDidCatch React JS

Question

Я пытаюсь реализовать ErrorBoundaryследуя документации и до сих пор добиваясь успеха.

Я использовал тот же подход, что и в документации

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Чего я не могу сделать, так это получить состояние дочернего компонента MyWidget внутри ErrorBoundary в componentDidCatch функция ErrorBoundary. Я хочу отправить состояние дочернего компонента вместе с ошибкой на сервер, чтобы было легче отлаживать.

До сих пор я пробовал использовать refs подобно

<ErrorBoundary childrenRef={this.refs["myWidget"]}>
   <MyWidget ref="myWidget"/>
</ErrorBoundary>

А затем в моем дочернем компоненте я создал функцию getState который просто возвращает собственное состояние, а затем внутри ErrorBoundary Я получаю состояние дочернего компонента, используя предоставленные ref подобно

render() {
    if (this.props.childrenRef) {
      console.log(this.props.childrenRef.decoratedRef.current.getState());
    }
    if (this.state.errorInfo) {
      // Error path
      console.log(this.state.errorInfo);
      return (
        <div>
          <h2>Something went wrong.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }
    // Normally, just render children
    return this.props.children;
  }

который выполняет задание и возвращает состояние дочернего компонента, но когда я пытаюсь использовать тот же код получения состояния с использованием ссылок внутри componentDidCatch тогда это this.props.childrenRef.decoratedRef.current приводит к null, возможно из-за того, что в дочернем компоненте произошла ошибка и он отключен, поэтому current становится null который ранее имел ссылку на сам дочерний компонент.

Есть ли лучший способ добиться этого? Я делаю что-то неправильно?