Error when using stylis-plugin-rtl in a React with TypeScript project

[Adarsh S]

I'm encountering an error when trying to use `stylis-plugin-rtl` in my React project with TypeScript. Here are the details of my issue:

1. **Error Description**:
   When running `yarn start`, I encountered the following error:
ERROR in ./node_modules/stylis-plugin-rtl/dist/stylis-rtl.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: C:\Soblue-prj\soblue_react-develop\node_modules\stylis-plugin-rtl\dist\stylis-rtl.js: Cannot read properties of undefined (reading '0')
...



2. **Steps I Took**:
- I removed `stylis-plugin-rtl` using `yarn remove stylis-plugin-rtl`.
- I installed `stylis-p...@2.0.2` using `yarn add stylis-p...@2.0.2`.

3. **Current Issue**:
After performing the above steps, I encountered a TypeScript error:
ERROR in src/components/settings/ThemeRtlLayout.tsx:26:72
TS2304: Cannot find name 'StylisPlugin'.



4. **Code Snippet**:
Here's the relevant code from `ThemeRtlLayout.tsx` where the error occurs:
```typescript
const cacheRtl = createCache({
  key: theme.direction === 'rtl' ? 'rtl' : 'css',
  stylisPlugins: theme.direction === 'rtl' ? [prefixer, rtlPlugin as StylisPlugin] : [],
});
Additional Context:
I'm using React with TypeScript.
I've checked the types of prefixer and rtlPlugin, and they are both correct.
I'm unsure why TypeScript cannot find StylisPlugin.