Странное имя класса при использовании withStyles на реагирующий компонент

Question

Я обновляю Material UI до v4.9.5 и столкнулся со странной проблемой. Мои имена классов выглядят очень странно, что заставляет меня думать, что что-то не так:)

Имена классов для элементов в этом компоненте выглядят так:

<div class=".LoadNamespace\(WithWidth\(TopBar\)\)-flex-2">

В моем компоненте, который я использую с withStyles как это:

export default withRouter(
    connect(mapStateToProps)(
        withTheme(
            withStyles(styles)(TopBar)
        )
    )
);

Я использую { createGenerateClassName, StylesProvider } для генерации имен классов, как это:

const generateClassName = createGenerateClassName();
<StylesProvider generateClassName={generateClassName}>
    <Provider store={store}>
        <ThemeWrapper>
          <Root />
        </ThemeWrapper>
    </Provider>
</StylesProvider>

В ThemeWrapper в основном просто:

<ThemeProvider theme={theme} >
    {this.props.children}
</ThemeProvider>

Это что-то неправильно, или имена классов должны выглядеть так?