typescript problem in implementing rtl support for material-ui with emotion

Question

I am trying to implement rtl support in a project using material-ui, as described here. my problem is in stage 4.1. I am trying to create a new cache instance that uses the stylis-plugin-rtl. the example povided in the documentation is in javascript & I'm trying to port that into typescript. I have two problems. first, I am trying to pass stylis plugins to the createCache function but I get this error:

Type '(element: Element, index: number, children: Element[], callback: Middleware) => string | void' is not assignable to type 'Plugin'.
  Types of parameters 'element' and 'context' are incompatible.
    Type 'import("/home/ehsun/Desktop/volkswagen/packages/swiss-army-knife/node_modules/@emotion/stylis/types/index").Context' is not assignable to type 'Element'.ts(2322)

which I bypassed like this:

const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [
    (prefixer as unknown) as StylisPlugin,
    (rtlPlugin as unknown) as StylisPlugin,
  ],
});

the second problem is that the CacheProvider component has a problem with the type of the created cache & gives this warning:

Property 'insert' is missing in type 'import("/node_modules/@emotion/utils/types/index").EmotionCache' but required in type 'import("/node_modules/@emotion/react/node_modules/@emotion/utils/types/index").EmotionCache'.ts(2741)
index.d.ts(26, 3): 'insert' is declared here.
index.d.ts(338, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<EmotionCache>'

which I bypassed by casting the cache as any

<CacheProvider value={cacheRtl as any}>{children}</CacheProvider>

I feel like both solutions are wrong/incompelete, and a result of me being a bit inexperienced with typescript, so I would love to know if you people had a better idea. thanks in advance.