How to add react component library to shadow DOM?

Question

I want to prevent my styles from getting overridden by other styles and vice versa. I have attached the shadow host but it is not quite working and throwing this error.

error -

code -

export const PluginProvider: React.FC<PluginProviderProps> = ({
  children,
  theme,
}) => {
  useEffect(() => {
    if (!theme || !Object.keys(theme).length) return;
    applyTheme(theme);
  }, [theme]);
  useLayoutEffect(() => {
    const host = document.getElementById('dbn-dashboard-plugin');
    host?.attachShadow({ mode: 'open' });
  }, []);
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </ErrorBoundary>
  );
};

export const Dashboard: React.FC<DashboardProps> = React.memo(
  ({ token, options, theme }) => {
    return (
      <div id="dbn-dashboard-plugin">
        <PluginProvider theme={theme}>
          <EmbeddedDashboard token={token} options={options} />
        </PluginProvider>
      </div>
    );
  }
);

I want to get it work to avoid css collision with other projects.