next.js: styled-jsx: plugins is not a function

What version of Next.js are you using?

10.0.9

What version of Node.js are you using?

15.11.0

What browser are you using?

Chrome, Brave, Firefox

What operating system are you using?

Linux, WIndows, MacOS

How are you deploying your application?

next start

Describe the Bug

When trying to set up styled-jsx to work with sass I get the following error

event - build page: /
wait  - compiling...
info  - Using external babel configuration from /home/m1ck0/Desktop/projects/test-next-style/with-styled-jsx-scss-app/.babelrc
error - ./pages/index.js
TypeError: /home/m1ck0/Desktop/projects/test-next-style/with-styled-jsx-scss-app/pages/index.js: plugins is not a function
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./pages/index.js
TypeError: /home/m1ck0/Desktop/projects/test-next-style/with-styled-jsx-scss-app/pages/index.js: plugins is not a function
Error: Cannot find module '/home/m1ck0/Desktop/projects/test-next-style/with-styled-jsx-scss-app/.next/server/pages-manifest.json'

Expected Behavior

Project should build with no problem

To Reproduce

Add this to .babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-sass"]
        }
      }
    ]
  ]
}

Add this to pages/index.js

const backgroundColor = '#eee'

export default function Home() {
  return (
    <div className="hello">
      <p>Hello World</p>
      <style jsx>{`
        $color: red;

        .hello {
          background-color: ${backgroundColor};
          padding: 100px;
          text-align: center;
          transition: 100ms ease-in background;

          &:hover {
            color: $color;
          }

          @media only screen and (max-width: 480px) {
            font-size: 20px;
          }
        }
      `}</style>
    </div>
  )
}