ErrorBoundary component stack does not show the names of my components. Why and how can I fix it?

Question

Please look at the component stack I get after an error below. My own components are written as "Unknown". The other components like the ones I am using from fluentui are shown by their names, e.g as "Stack". To be able to understand where the problem originates, I need to see the real name of those "Unknown"s. How can I do that?

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

I will give more info on in case it is needed. This is the ErrorBoundary component that I probably copied from React docs (This side project has been going on 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;
  }
}

I use it to wrap my app so:

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);

And here is an example of a component declaration. I use functional components and react hooks in general:

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