ClassName generator not working with Next.js App router

[NotYoojun]

Steps to reproduce

Steps:

1. Open this link to live example: click here
2. npm run dev
3. Open the devtools and inspect the element tree

Current behavior

All the class names stay unchanged:

Expected behavior

All class names should be transformed by the ClassNameGenerator.

Context

I also tried to import the 'init-cls.ts' as a client script, but that only affects the client side, and the server side is just doing nothing.
I'm following this doc: https://mui.com/material-ui/experimental-api/classname-generator/

Your environment

System:
OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
Binaries:
Node: 20.9.0 - /usr/local/bin/node
npm: 9.8.1 - /usr/local/bin/npm
pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: latest => 11.11.1
@emotion/styled: latest => 11.11.0
@mui/core-downloads-tracker: 6.0.0
@mui/icons-material: latest => 6.0.0
@mui/material: latest => 6.0.0
@mui/material-nextjs: latest => 6.0.0
@mui/private-theming: 6.0.0
@mui/styled-engine: 6.0.0
@mui/system: 6.0.0
@mui/types: 7.2.16
@mui/utils: 6.0.0
@types/react: ^19.0.0 => 19.0.2
react: ^19.0.0 => 19.0.0
react-dom: ^19.0.0 => 19.0.0
typescript: latest => 5.1.6

Search keywords: next, nextjs, app, classname, styles, experimental, css, class

[NotYoojun]

Anyone looking into this? please