How to use the react-imported-component function in react-imported-component

__deoptimization_sideEffect__(marker, realImport);
  }

  return realImport;
};

import { lazy, useImported } from "react-imported-component";
import { assignImportedComponents } from "react-imported-component/boot";
import imported from 'react-imported-component';
const AsyncComponent0 = imported(() => importedWrapper("imported_18g2v0c_component", import(
/* webpackChunkName:namedChunk */
'./MyComponent')));
const AsyncComponent1 = imported(() => importedWrapper("imported_18g2v0c_component", import('./MyComponent')));
const AsyncComponent2 = imported(async () => await importedWrapper("imported_18g2v0c_component", import('./MyComponent')));
const AsyncComponent3 = imported(() => Promise.all([importedWrapper("imported_18g2v0c_component", import('./MyComponent')), importedWrapper("imported_18g2v0c_component", import('./MyComponent'))]));
const AsyncComponent4 = imported(async () => (await Promise.all([importedWrapper("imported_-1qs8n90_component", import('./MyComponent1')), importedWrapper("imported_9j5sqq_component", import('./MyComponent2'))]))[0]);
export default AsyncComponent1;

import imported from 'react-imported-component';

const AsyncComponent0 = imported(() => import(/* webpackChunkName:namedChunk */'./MyComponent'));

const AsyncComponent1 = imported(() => import('./MyComponent'));

const AsyncComponent2 = imported(async () => await import('./MyComponent'));

const AsyncComponent3 = imported(() => Promise.all([import('./MyComponent'), import('./MyComponent')]));

const AsyncComponent4 = imported(async () => (await Promise.all([import('./MyComponent1'), import('./MyComponent2')]))[0]);

export default AsyncComponent1;

import * as React from 'react'
import Counter from './Counter'
import imported, {lazy, ComponentLoader, printDrainHydrateMarks} from 'react-imported-component'
import Portal from './Portal'
import Indirect from './indirectUsage';

imported(() => import(/* webpackChunkName: "namedChunk-1" */'./DeferredRender'), {
  async: true
});

const Async = imported(() => import(/* webpackChunkName: "namedChunk-1" */'./DeferredRender'));
const Async2 = lazy(() => {
    console.log('loading lazy');
    return import(/* webpackChunkName: "namedChunk-2" */'./Lazy')
});
const ShouldNotBeImported = imported(() => import(/* webpackChunkName: "namedChunk-2" */'./NotImported'));

const App = () => (
  <h1>
    <p>Component loaded</p>
     import(/* webpackChunkName: "namedChunk-1" */'./DeferredRender')}
    /&gt;
    <p>test!</p>
    <hr>
    <p>C: </p>
    <hr>
    <p>Imported: </p>
    <hr>
    
      <p>Lazy: </p>
    </h1>

import React from 'react';
import { Switch, BrowserRouter as Router, Route } from 'react-router-dom';
import importedComponent from 'react-imported-component';

import Home from './Home';
import Loading from './Loading';

const AsyncDynamicPAge = importedComponent(
  () => import(/* webpackChunkName:'DynamicPage' */ './DynamicPage'),
  {
    LoadingComponent: Loading
  }
);
const AsyncNoMatch = importedComponent(
  () => import(/* webpackChunkName:'NoMatch' */ './NoMatch'),
  {
    LoadingComponent: Loading
  }
);

const App = () => {
  return (
    
      <div>
        
      </div>

import * as React from "react";
import Home from "./components/Home";
import importedComponent, {ComponentLoader, loadableResource} from "react-imported-component";

const Another = importedComponent(() => import(/* webpackChunkName: namedChunk-0 */"./components/Another"), {
  LoadingComponent: () =&gt; <div>loading</div>
});
const Other1 = importedComponent(() =&gt; import(/* webpackChunkName: "namedChunk-1" */"./components/Other"));
const Other2 = importedComponent(() =&gt; import(/* webpackChunkName: "namedChunk-1" */"./components/OtherTween"));

const AnotherWrapped = importedComponent(() =&gt; import(/* webpackChunkName: namedChunk-0 */"./components/Another"), {
  render(Component, state, props: { prop: number }) {
    if (state === "loading") {
      return <span>
    }
    return <div></div>
  }
});
//import Another from "./components/Another";

// @ts-ignore
const importCss = () =&gt; import("./App.css");

export default function App() {
  return (</span>

var importedWrapper = function (marker, realImport) {
  if (typeof __deoptimization_sideEffect__ !== 'undefined') {
    __deoptimization_sideEffect__(marker, realImport);
  }

  return realImport;
};

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

import imported from 'react-imported-component';
const AsyncComponent0 = imported(() => importedWrapper("imported_18g2v0c_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent')))));
const AsyncComponent1 = imported(() => importedWrapper("imported_18g2v0c_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent')))));
const AsyncComponent2 = imported(async () => await importedWrapper("imported_18g2v0c_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent')))));
const AsyncComponent3 = imported(() => Promise.all([importedWrapper("imported_18g2v0c_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent')))), importedWrapper("imported_18g2v0c_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent'))))]));
const AsyncComponent4 = imported(async () => (await Promise.all([importedWrapper("imported_-1qs8n90_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent1')))), importedWrapper("imported_9j5sqq_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent2'))))]))[0]);
export default AsyncComponent1;

var importedWrapper = function (marker, realImport) {
  if (typeof __deoptimization_sideEffect__ !== 'undefined') {
    __deoptimization_sideEffect__(marker, realImport);
  }

  return realImport;
};

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

import imported from 'react-imported-component';
const AsyncComponent0 = imported(() => importedWrapper("imported_18g2v0c_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent')))));
const AsyncComponent1 = imported(() => importedWrapper("imported_18g2v0c_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent')))));
const AsyncComponent2 = imported(async () => await importedWrapper("imported_18g2v0c_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent')))));
const AsyncComponent3 = imported(() => Promise.all([importedWrapper("imported_18g2v0c_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent')))), importedWrapper("imported_18g2v0c_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent'))))]));
const AsyncComponent4 = imported(async () => (await Promise.all([importedWrapper("imported_-1qs8n90_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent1')))), importedWrapper("imported_9j5sqq_component", Promise.resolve().then(() => _interopRequireWildcard(require('./MyComponent2'))))]))[0]);
export default AsyncComponent1;

import React from 'react'
import { hot } from 'react-hot-loader'
import { Switch, Route, Redirect } from 'react-router-dom'
import importedComponent from 'react-imported-component'

const Index = importedComponent(() => import('./index'))
const Second = importedComponent(() => import('./second'))

function _Routes() {
  return (
    
  )
}

export const Routes = hot(module)(_Routes)

import {hot} from 'react-hot-loader';
import React from 'react';
import importedComponent from 'react-imported-component';

import { Helmet } from 'react-helmet';
import { Switch, Route, Redirect } from 'react-router-dom';

import HelloWorld from './HelloWorld';
import "./base.css";

const HelloWorld2 = importedComponent(() => import('./HelloWorld2'));

export default hot(module)(function App() {
  return (
    <div>
      
        
      
      App
      
    </div>
  );
})

import React from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import importComponent from 'react-imported-component'
import { GlobalStyles } from './styles'
import Header from './components/Header'
import Home from './pages/Home'
import LoadingComponent from './pages/Loading'
import ErrorComponent from './pages/Error'

const About = importComponent(() => import('./pages/About'), {
  LoadingComponent,
  ErrorComponent
})

export const renderAboutPage = () => 

const App = () => (
  
    
    <header>

    </header>