How to append the file name to class name?

[umlx5h]

Sorry newbie question.
How can I setup to add the file name(class name) to the class display name?
With default setup, styled-components's component name is only appended to the class name.

Example

Test.tsx

const Sample = styled.div``

<Sample>hello<Sample>

↓

<div class="Sample-gZqETv iFEiZX">hello</div>

I want to convert this as follows.

<div class="Test-Sample-gZqETv iFEiZX">hello</div>

[umlx5h]

Sorry, I figured out as follows.

const styledComponentsTransformer = createStyledComponentsTransformer({
  getDisplayName: (filename, bindingName) => {
    let formattedFilename = '';
    filenamePaths = filename.split('/');

    if (filename.endsWith('index.tsx')) {
      formattedFilename = filenamePaths[filenamePaths.length - 2];
    } else {
      formattedFilename = filenamePaths[filenamePaths.length - 1];
    }

    return `${formattedFilename}-${bindingName}`;
  },
});