shadowRootWithReact.js

 const ShadowRoot = ({ content, children }) => {
  const container = useRef(null);
  useEffect(() => {
    if (container) {
      const shadowRoot = container.current.attachShadow({ mode: 'open' });
      ReactDOM.render(children, shadowRoot);
    }
  }, []);
  return (
    <div style={{ height: '100%', width: '100%' }} ref={container}>
      {content}
    </div>
  );
};