Component theme doesn't apply to testing playground

Question

I'm having a hard time why jest doesn't use the theme I extend in Chakra UI. Even though I wrap the component in renderWithTheme() method. I refer to the Chakra UI documentation if there's a testing integration that needs to be done, like adding transform in jest config. But I didn't find any.

My goal is to assert the style from the theme I've made.

Here is the sample code

describe("Avatar", () => {
  it("has avatar in the document", () => {
    renderWithTheme(
      <Avatar
        name="Juan Dela Cruz"
      />
    );

    screen.logTestingPlaygroundURL();
    const avatarEl = screen.getByRole("img", {
      name: /juan dela cruz/i,
    });

    //assertion if I've put the correct styles from theme
    expect(avatarEl.innerHTML).toHaveStyle(
    ` 
      border: solid 1px #e1e1e1;
      font-size: 16px;
    `
    )
  });
  
});

Here is the renderWithTheme method.

   export const renderWithTheme =(ui: React.ReactNode) => {
      const Wrapper = ({ children }: {children: React.ReactNode}) => (
        <Providers>{children}</Providers>
      );

      return render(ui, { wrapper: Wrapper });
    };

In my <Provider/>.

    export const Providers = ({ children }: IProvidersProps) => {
      return <ChakraProvider theme={Theme}>{children}</ChakraProvider>;
    };

Here's my avatar theme

    const { definePartsStyle, defineMultiStyleConfig } =
      createMultiStyleConfigHelpers(avatarAnatomy.keys);

    const baseStyle = definePartsStyle((props) => {
      const { theme } = props;

     return {
        container: {
          bg: theme.colors.gray[50],
          border: `solid 1px ${theme.colors.black[400]}`,
          fontFamily: "SamsungOne",
          fontWeight: 800,
          fontSize: "16px",
          color: theme.colors.black[500],
        },
      };
    });

    export const avatarTheme = defineMultiStyleConfig({
      baseStyle,
    });

here is my jest config

    const config: Config = {
      coverageProvider: 'v8',
      testEnvironment: 'jsdom',
      verbose: true,
      // Add more setup options before each test is run
      setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
      moduleNameMapper: {
        '^@/app/(.*)$': '<rootDir>/src/app/$1',
        '^@/component/(.*)$': '<rootDir>/src/component/$1',
        '^.+\\.svg$': 'jest-svg-transformer',
      },
      testPathIgnorePatterns: ["<rootDir>/__tests__/testUtils/"],
      transform: {
        '^.+\\.[jt]sx?$': 'babel-jest',
      },
      testMatch: [
        '**/__tests__/**/*.spec.tsx',
        '**/__tests__/**/*.test.tsx',
      ],
    }

In testing playground. It seems that in the DOM there's chakra class. But it doesn't have style on the component.

the actual look on the application: