How to use the react-loadable.preloadReady function in react-loadable

import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { hydrate } from 'react-dom';
import Loadable from 'react-loadable';
import { HelmetProvider } from 'react-helmet-async';

import DataLoader from '../common/lib/DataLoader';

import configureStore from '../common/redux/store';

// Initialize store
const store = configureStore(window.__INITIAL_STATE__);
const mountApp = document.getElementById('app');

Loadable.preloadReady().then(() => {
  hydrate(
    
      
        
          
        
      
    ,
    mountApp,
  );
});

// For hot reloading of react components
if (module.hot) {
  console.log('🔁  HMR Reloading - client');
  module.hot.accept();

: 
          
        
    }
  
  const jsx = isServer
    ?  {
      modules.push(moduleName)
    }}>
      { _jsx }
    
    : _jsx

  if (!isServer) {
    await preloadReady()
  }
  const html = reactRenderer(jsx, !isServer && document.getElementById('root'))
  return [html, store.getState(), modules]
}

window.onload = () => {
		Loadable.preloadReady().then(() => {
			ReactDOM.hydrate(
				
					
						
					
				
			, document.getElementById('root'));
		})
	}
} else {

export function mountClient(routes) {
  const { relay } = window.__BOOTSTRAP__
  const routerCache = new Cache()

  routerCache.set(window.location.pathname, relay.response)

  Loadable.preloadReady().then(() => {
    ReactDOM.hydrate(
      
        {renderRoutes(routes, relay)}
      ,
      document.getElementById('react-root')
    )
  })
}

global.main = () => {
  Loadable.preloadReady().then(() => {
    hydrate(, global.document.getElementById('root'), () => {
      const ssStyles = global.document.getElementById('jss-server-side');
      ssStyles.parentNode.removeChild(ssStyles);
    });
    global._ASYNC_FETCH = true;
  });
};

window.main = () => {
  Loadable.preloadReady().then(() => {
    ReactDOM.hydrate(, document.getElementById('app'));
  });
};

import App from './App';
import React from 'react';
import { hydrate } from 'react-dom';
import Loadable from 'react-loadable';
import BrowserRouter from 'react-router-dom/BrowserRouter';

Loadable.preloadReady().then(() => {
  hydrate(
    
      
    ,
    document.getElementById('root'),
  );
});

if (module.hot) {
  module.hot.accept();
}

const HMRRenderer = Component => {
  preloadReady().then(() => {
    module.hot
      ? render(Component, documentRoot)
      : hydrate(Component, documentRoot);
  });
};

const render = () => {
  const app = (
    
      
        
      
    
  )

  Loadable.preloadReady().then(() =>
    hydrate(app, document.getElementById('app')),
  )
}

const render = (Component: React.ComponentType) => preloadReady().then(() =>
    ReactDOM.hydrate(
        
            
        ,
        document.getElementById('root')
    )
);