import React, {
  useRef,
  forwardRef,
  useImperativeHandle,
  useEffect,
  useState,
} from "react";
import { CssVarsProvider, CssBaseline } from "@mui/joy";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
import { default as $ } from "jquery";

export function JoyUIRootIsland({ children }) {
  const cache = React.useRef();
  if (!cache.current) {
    cache.current = createCache({ key: "joy" });
  }
  React.useEffect(() => {
    const current = cache.current;
    return () => current.sheet.flush();
  }, []);
  return (
    <CacheProvider value={cache.current}>
      <CssVarsProvider>{children}</CssVarsProvider>
    </CacheProvider>
  );
}

