How to use the react-devtools-inline/frontend.initialize function in react-devtools-inline

connect(cb) {
      const DevTools = initializeFrontend(contentWindow);

      // Activate the backend only once the DevTools frontend Store has been initialized.
      // Otherwise the Store may miss important initial tree op codes.
      activateBackend(contentWindow);

      const root = createRoot(container);
      root.render(
        createElement(DevTools, {
          browserTheme: 'light',
          enabledInspectedElementContextMenu: true,
          enabledInspectedElementContextMenuCopy: true,
          showTabBar: true,
          warnIfLegacyBackendDetected: true,
          warnIfUnsupportedVersionDetected: true,
        }),
      );

useEffect(() => {
    if (Component === null) {
      const { contentWindow } = iframe;

      setComponent(initialize(contentWindow));

      // Let the backend know to initialize itself.
      // We can't do this directly because the iframe is sandboxed.
      // Only initialize the backend once the DevTools frontend Store has been initialized!
      // Otherwise the Store may miss important initial tree op codes.
      iframe.onload = () => {
        contentWindow.postMessage(
          {
            type: 'activate',
          },
          '*'
        );
      };
    }
  }, [iframe, Component]);

const iframe = iframeRef.current;

    // This should be the iframe the backend hook has been installed in.
    const contentWindow = iframe.contentWindow;

    // Helps with positioning Overlay UI.
    contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;

    initializeBackend(contentWindow);

    // Reset preferences between tutorial steps.
    localStorage.removeItem('React::DevTools::componentFilters');

    // This returns a React component that can be rendered into your app.
    // 
    const DevTools = initializeFrontend(contentWindow);

    // Schedule an update with React now that the DevTools UI is ready to be rendered.
    setDevTools(DevTools);

    // Let the backend know it's safe to activate.
    activateBackend(contentWindow);
  }, [iframeRef]);

let iframe = document.getElementById(
      'sandbox-preview'
    ) as HTMLIFrameElement;

    // iframe hasn't initialized or just isn't there
    while (iframe === null && !unmounted.current) {
      // Retry every second
      // eslint-disable-next-line
      await delay(1000);
      iframe = document.getElementById('sandbox-preview') as HTMLIFrameElement;
    }

    if (iframe) {
      const { contentWindow } = iframe;

      setDevTools(initialize(contentWindow));
      iframe.onload = () => {
        contentWindow.postMessage(
          {
            type: 'activate',
          },
          '*'
        );
      };
    }
  }, []);

let iframe = document.getElementById(
      'sandbox-preview'
    ) as HTMLIFrameElement;

    // iframe hasn't initialized or just isn't there
    while (iframe === null && !unmounted.current) {
      // Retry every second
      // eslint-disable-next-line
      await delay(1000);
      iframe = document.getElementById('sandbox-preview') as HTMLIFrameElement;
    }

    if (iframe) {
      const { contentWindow } = iframe;

      setDevTools(initialize(contentWindow));
      iframe.onload = () => {
        contentWindow.postMessage(
          {
            type: 'activate',
          },
          '*'
        );
      };
    }
  }, []);