How to hide fileName with vite-plugin-babel-macros?

Question

I'm working on a React project with Vite and Styled components. For better class names, I use the plugin vite-plugin-babel-macros, which works. But it displays the file name inside the class, which I'd like to hide, so from:

<h1 class="Homepage__H1-sc-1el87d5-0 frwzme"></h1>

to:

<h1 class="H1-sc-1el87d5-0 frwzme"></h1>

With create-react-app I have a file babel-plugin-macros.config.js where I add this code:

const config = {
    fileName: false,
    displayName: true,
    meaninglessFileNames: ["index", "styles"],
}

But this does not work. I tried to add this in my vite.config.ts, but same problem:

export default defineConfig({
    plugins: [
        react({
            babel: {
                plugins: [
                    [
                        "babel-plugin-styled-components",
                        {
                            fileName: false,
                            displayName: true,
                            meaninglessFileNames: ["index", "styles"],
                        },
                    ],
                ],
            },
        }),
        macrosPlugin(),
    ],
})

Thanks for your help!