Page becomes unresponsive when using multiple custom stitches components

[Mattaparthi Upendra Sai Teja]

Bug report

Describe the bug

I created a sandbox with React + Typescript + Stitches. I created some basic components like Box and Text with stitches, something like below

const BaseBox = styled("div", {
  // Some variants
});

type BoxProps = ComponentProps<typeof BaseBox> & { testID?: string };

function Box(props: BoxProps) {
  const { testID, ...restProps } = props;
  return <BaseBox {...restProps} data-testid={testID} />;
}

const BaseText = styled(BaseBox, {
  // Some variants
});

type TextProps = ComponentProps<typeof BaseText> & { testID?: string };

function Text(props: TextProps) {
  const { testID, ...restProps } = props;
  return <Text {...restProps} data-testid={testID} />;
}

When I am using the above components my page is freezing and no UI is rendered

To Reproduce

Steps to reproduce the behavior:

1. Go to the sandbox
2. After the Codesandbox UI loading is complete, the preview section still appears blank

Steps to see the preview section

1. Remove stitches components usage in App.tsx
2. Create a simpler UI with div and span
3. Now you should see the preview

Expected behavior

When using stitches components should not freeze my page.

Screenshots

Firefox

System information

• OS: Ubuntu
• Browser: Chrome - 108.0.5359.124, Firefox - 108.0.1
• Version of Stitches: 1.2.8
• Version of Node.js: 14.18.2

Additional context