babel-plugin-react-css-modules not working

Question

I am not getting this to work. And I can not find out why - I have searched, researched and asked AI. But no success. So I am reaching out for your help.

This is my setup:

package.json:

{
  "name": "cupinvite",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fontsource/rajdhani": "^4.5.10",
    "@fortawesome/fontawesome-pro": "^6.3.0",
    "@fortawesome/fontawesome-svg-core": "^6.3.0",
    "@fortawesome/pro-regular-svg-icons": "^6.3.0",
    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
    "@fortawesome/react-fontawesome": "^0.1.15",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.87",
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "babel-plugin-react-css-modules": "^5.2.6",
    "classnames": "^2.3.2",
    "cupman-utils": "file:../utils/cupman-utils-v0.2.118.tgz",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-transition-group": "^4.4.2",
    "sass": "^1.42.1",
    "typescript": "^4.9.5",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@types/d3-ease": "^3.0.0",
    "@types/react-css-modules": "^4.6.8",
    "@types/react-transition-group": "^4.4.4",
    "postcss-scss": "^4.0.9",
    "zip-lib": "^0.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

in the root of my project I have added .babelrc and inside I have added:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    ["babel-plugin-react-css-modules", {
      "generateScopedName": "[name]__[local]___[hash:base64:5]",
      "filetypes": {
        ".scss": {
          "syntax": "postcss-scss",
          "plugins": [
            "postcss-nested"
          ]
        }
      }
    }]
  ]
}

In my react app I have added a test component:

import './Invitation.scss';

export default function Invitation () {
  return <div styleName='table'>Hej</div>
}

And inside my Invitation.scss I have added:

.table {
  font-size: 3rem;
}

The app is running with yarn start, no ts-errors or similar, and I can see 'Hej' in the browser. But the css does not apply and I get this error in the console:

react-dom.development.js:86 Warning: React does not recognize the `styleName` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `stylename` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at Invitation
    at div
    at App

Any suggestions how to solve?