[BUG] Using styled components in JS plugin

[kunver400]

Describe the problem

Using ThemeProvider, createGlobalStyle from styled-components breaks the app with react 130 violation.
this issue can be worked around temporarily by not externalizing the dependency.
using vite config from : https://github.com/voxel51/hello-world-plugin-js/blob/main/vite.config.ts

Code to reproduce issue

import { useTheme } from "@fiftyone/components";
const theme = useTheme();
...
    <ThemeProvider theme={theme}>
      <BrandedContainer>
       ...
      </BrandedContainer>
    </ThemeProvider>

System information

• Linux Ubuntu 22.04, WSL2
• Python 3.10.12
• FiftyOne v1.2.0, Voxel51, Inc.
• Source install
• Node v18.12.0

Willingness to contribute

The FiftyOne Community encourages bug fix contributions. Would you or another
member of your organization be willing to contribute a fix for this bug to the
FiftyOne codebase?

• Yes. I can contribute a fix for this bug independently
• Yes. I would be willing to contribute a fix for this bug with guidance
  from the FiftyOne community
• No. I cannot contribute a bug fix at this time

[kunver400]

more clues

following import seems to fix the issue
import { createGlobalStyle, ThemeProvider } from 'styled-components/dist/styled-components';