Enabling addComponentName with @compiled/babel-plugin in CRA

[NikAtIdeally]

I'm trying to get component names to show up in HTML.
I have my react app setup using CRA + CRACO and I'm using the @compiled/babel-plugin.

Works really well, but somehow I am not able to get the component names to show up. Not sure if that's a bug or am I doing something wrong?

My craco plugin config:

module.exports = {
  webpack: {
    options: {
      compiler: "ttypescript",
    },
    configure: {
      entry: "./src/index.tsx",
    },
  },
  babel: {
    plugins: [
      [
        "module-resolver",
        {
          root: ["./src"],
          alias: {
               ...
          },
        },
      ],
      // ↓↓ defined last ↓↓
      [
        "@compiled/babel-plugin",
        {
          addComponentName: true,
        },
      ],
    ],
  },
};

My component:

import React from "react";
import { styled } from "@compiled/react";

const S = {
  Container: styled.div``,
};
export const Component: React.FC<{}> = () => {
  return <S.Container>ToDo</S.Container>;
};

Thanks!

UPDATE:

Having the following setup does work correctly. Issue seems to be with me using a wrapper object around my styles.
So the issue is with the lib not liking components being children of other entities.

import React from "react";
import { styled } from "@compiled/react";

const Container = styled.div``,
export const Component: React.FC<{}> = () => {
  return <Container>ToDo</Container>;
};

So my question now is there any way to have Container be child of an object/namespace and still have their name show up in HTML? Preferably with the parent object name

UPDATE 2:

So I got a work around to get the compiled to do what I want it to do. (almost)

import React from "react";
import { styled } from "@compiled/react";

const Container = styled.div`...`;
const MyImage = styled.img`...`;
const MyHeader = styled.h1`...`;

export const MyStyles = {Container, MyImage, MyHeader};

That way it works correctly and I can see component names show up. Would be nice to not have to do that and have component names work in prod env too.

[NikAtIdeally]

I've tried an empty react app with Parcel and could not get component names to show up om html either.

I thought addComponentName would work similar to babel-plugin-styled-components, but maybe Im wrong. If thats the case is there a plugin or setting I could use to give html elements class names based on their component names?