В стеке компонентов ErrorBoundary не отображаются имена моих компонентов. Почему и как это исправить?

Question

Пожалуйста, посмотрите на стек компонентов, который я получил после ошибки ниже. Мои собственные компоненты написаны как «Неизвестно». Другие компоненты, подобные тем, которые я использую на fluentui, показаны по их именам, например, как «Стек». Чтобы понять, откуда взялась проблема, мне нужно увидеть настоящие имена этих «Неизвестных». Как я могу это сделать?

      Something went wrong.
TypeError: Unable to get property 'auth' of undefined or null reference

    in Unknown
    in div (created by Stack)
    in Stack
    in div
    in Unknown (created by Context.Consumer)
    in Route
    in Unknown
    in Switch
    in div
    in Router (created by HashRouter)
    in HashRouter
    in div
    in Unknown
    in div (created by FabricBase)
    in FabricBase (created by Context.Consumer)
    in StyledFabricBase
    in AppContainer
    in ErrorBoundary

Я дам больше информации, если она понадобится. Это компонент ErrorBoundary, который я, вероятно, скопировал из документации React (этот побочный проект работал на forevarr).

      import * as React from "react";

export class ErrorBoundary extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  componentDidCatch(error, errorInfo) {
    // Catch errors in any components below and re-render with error message
    this.setState({
      error: error,
      errorInfo: errorInfo
    });
    // You can also log error messages to an error reporting service here
  }

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

Я использую его, чтобы обернуть свое приложение так:

      const render = (Component, message) => {
  ReactDOM.render(
    <ErrorBoundary>
      <AppContainer>
        <Fabric>
          <Component
            title={title}
            isOfficeInitialized={isOfficeInitialized}
            message={message}
          />
        </Fabric>
      </AppContainer>
    </ErrorBoundary>,
    document.getElementById("container")
  );
};
...
render(App, message);

А вот пример объявления компонента. Я использую функциональные компоненты и вообще реагирую на хуки:

      export const Login: React.FC<any> = withRouter(props => {