Adding Dynamic RTL integration with MUI V5

[sQuillP]

My question is this:

I would like to know the best way to change from LTR -> RTL and vice versa using state in a React component.
I know that using the createCache() function with the CacheProvider can cause unwanted performance issues in an application if handled incorrectly. It seems by using an approach like the one shown below can cause issues since it is constantly switching from
one cache value to another. Is there a better way to implement this way of switching cache values using state in react?

Using the example code below, I would like to know the best way to implement such functionality in an app.

import rtlPlugin from "stylis-plugin-rtl";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
import { prefixer } from "stylis";
import { useState } from "react";

// Create rtl cache
const cacheRtl = createCache({
  key: "muirtl",
  stylisPlugins: [prefixer, rtlPlugin],
});

const cacheLtr = createCache({
  key: "muiltr",
  stylisPlugins: [],
});

function RTL(props) {
  const [cache, setCache] = useState(cacheLtr);

  function onToggleRTL() {
    if (document.dir === "ltr") {
      document.dir = "rtl";
      setCache(cacheRtl);
    } else {
      document.dir = "ltr";
      setCache(cacheLtr);
    }
  }

  return (
    <CacheProvider value={cache}>
      <button onClick={onToggleRTL}>toggle direction</button>
    </CacheProvider>
  );
}