styled-components/macro isn't working with CRA

When i install a new create-react-app and add babel-plugin-styled-components and add displayName option to babel-plugin-macros.config.js it isn't adding readable classNames as in the documentation -> https://styled-components.com/docs/tooling#babel-macro.

Here is a repo with the configurations https://github.com/Futekov3216/CRA.git

P.S i dont want to eject

Today I myself faced such a problem. The problem lies in styled-components itself. Macro in styled does not work since version 5.2.2, and it is not known when it will be fixed. Simplest solution:

npm i [email protected]

This problem still persists in styled-components v5.3.3. Visit this to know more about the issue. At this moment you can install [email protected] as mentioned by @mxpv for getting the Component's name along with generated classes.