How can I fix Flickering of unstyled content in NExtJS application after upgrade to material UI 5

Question

I have the issue mentioned here https://github.com/vercel/next.js/issues/15642 and I have tried all the solutions they suggested . Nothing seems to work I have MUI5, react 17.0.2 aand nextJS 12.1.5. I cannot Upgrade Nextjs for now for some reasons. I used 'tss-react' while upgrading to MUI 5 and my _document.js is like this. Have anybody with the same versions found a solution to the flickering issue?

MyDocument.getInitialProps = async(ctx) => {
 
    const originalRenderPage = ctx.renderPage
    const cache = createEmotionCache()
    const { extractCriticalToChunks } = createEmotionServer(cache)

    ctx.renderPage = () =>
        originalRenderPage({
            enhanceApp: (App) =>
                function EnhanceApp(props) {
                    return <App emotionCache={cache} {...props} />;
                }
            })

    const initialProps = await Document.getInitialProps(ctx)
      
    const emotionStyles = extractCriticalToChunks(initialProps.html);
    const emotionStyleTags = emotionStyles.styles.map((style) => (
        <style
            data-emotion={`${style.key} ${style.ids.join(' ')}`}
            key={style.key}

            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{ __html: style.css }}
        />
    ))

    return {
        ...initialProps,
        emotionStyleTags
    }
}