order of "styled-components" and "sass" styles injected to a "react" index page

In our project we are using the combination of sass and styled-components! (we had sass from early days and now step by step moving toward just styled-components) And our project has a quite typical stack (react, typescript, webpack and ...)

I recently updated our styled-components to version 5.0.1 and started to face a weird issue.

In mode: "development", wen I run the project, the first time page is opened in browser, all is ok... but after a refresh, my styles start overriding each other in a wrong order.

In mode: "production", of course it's broken from the beginning!

I've noticed that it happens because of the wrong placement of injected <style /> by styled-components

When it's correct, the order looks like this (<style /> is somehow in between):

but when I refresh, it changes to this (goes all the way down after all other <link />s and <script />s):

I've tried variant ways to have it working, but no success... finally by downgrading styled-component to 4.4.1, the issue is fixed and order is correct:

Here is also my webpack config for .sass files, which is again quite standard

rules: [
    {
        test: /\.sass$/i,
        use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            {
                 loader: "postcss-loader",
                 options: {
                    ident: "postcss",
                    plugins: [require("autoprefixer")()],
                 },
             },
             "sass-loader",
        ],
    },
]

I was not sure if it can be handled properly in my code or just need to file an issue / question in styled-components github page... so asking it here first :)