How to use the @shopify/react-effect/server.extract function in @shopify/react-effect

export async function getUsedAssets(
  element: ReactElement,
  ...args: Arguments
) {
  const asyncAssets = new AsyncAssetManager();

  await extract(element, {
    decorate: element => (
      
        {element}
      
    ),
  });

  return asyncAssets.used(...args);
}

function Providers({children}: {children: React.ReactElement}) {
      return (
        
          
            
              {children}
            
          
        
      );
    }

    try {
      const app = render(ctx);
      await extract(app, {
        decorate(element) {
          return (
            
              {element}
            
          );
        },
        afterEachPass({renderDuration, resolveDuration, index, finished}) {
          const pass = `Pass number ${index} ${
            finished ? ' (this was the final pass)' : ''
          }`;
          const rendering = `Rendering took ${renderDuration}ms`;
          const resolving = `Resolving promises took ${resolveDuration}ms`;

          logger.log(pass);
          logger.log(rendering);

return async function render(ctx: RenderContext) {
    const app = renderFunction(ctx);
    const networkManager = new NetworkManager();
    const htmlManager = new HtmlManager();

    try {
      await extract(app, {
        decorate(app) {
          return (
            
              
                {app}
              
            
          );
        },
      });
    } catch (error) {
      logger.error(error);
      throw error;
    }

    applyToContext(ctx, networkManager);