MUI theme not getting applied for <Tabs>- ReactJs - after upgrade to v5

I am new to react. Recently our react project got updated to v5 version. After the change, some of the styles that were in place for <Tab> do not work.

In the index.js we have the below:

const Theme = createTheme(theme);
ReactDOM.render(
    <StyledEngineProvider injectFirst>
        <ThemeProvider theme={Theme}>
            <Provider store={store}>
                <ConnectedRouter history={history}>
                    <Fragment>
                        <CssBaseline />
                        <GlobalCss />
                        <App />
                    </Fragment>
                </ConnectedRouter>
            </Provider>
        </ThemeProvider>
    </StyledEngineProvider>,
    rootElement);

The actual override for the MuiTabs is as below:

        MuiTabs: {
            indicator: {
                backgroundColor: '#FFA500',
                height: 3,

            }
        },
        MuiTab: {
            root: {
                fontSize: 12,
                fontWeight: 'bold',
                "&:hover": {
                    backgroundColor: '#323232',
                    color: '#fff'
                },
                "&$selected": {
                    fontSize: 14,
                    fontWeight: 'bold',
                    color: '#fff',
                }
            }
        },

Below is the component code block:

                <Tabs
                    value={this.state.currentTab}
                    onChange={this.handleOnChange}
                    variant="scrollable"
                    scrollButtons="auto"
                >
                    {tabs.map(tab => <Tab key={tab.id} label={tab.label} value={tab.id} />)}
                </Tabs>