Autolabling Materal UI components for easier debugging and testing

Question

In order to the facilitate testing and debugging we'd like to label our custom styled components just like the MUI labels their own internal components.

Currently all all custom styled components gets a class on the following format: class="css-vxvgcl" were as all MUI components gets classNames like: MuiBadge-root css-comk89

Emotion styled components can handle this by adding the following section to the babelrc file under the plugins section:

    [
          "@emotion",
          {
            "sourceMap": true,
            "autoLabel": "always",
            "labelFormat": "[local]",
            "cssPropOptimization": true
          }
    ],

However this leads to that we need to import styled from emotion rather than from MUI.

// import { styled } from '@mui/material/styles'; Can't be used if babel-setup should kick in
import styled from '@emotion/styled';

This feels like a risky disconnect from the MUI styled solution. Is there any possible solution to handle this in the babelrc file without having to use emotion/styled in our components?