if more the one same async components are rendered in same page, only one will be rendered

[shuijingyue]

comp.js

import React, {Component} from "react";

class Comp extends Component{
  render() {
    return (
      <div>async component</div>
    )
  }
}

export default Comp;

index.js

import { render } from 'react-dom';
import React, { Component } from 'react';
import { asyncComponent } from "react-async-component";
const Comp = asyncComponent({
  resolve: () => new Promise(resolve =>
    require.ensure(
      [],
      (require) => {
        resolve(require('./components/comp'));
      }
    )
  )
})
// App component will render Comp after 5 seconds
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      needComp: false
    }
  } 
  componentDidMount() {
    setTimeout(() => {
      this.setState({needComp: true})
    }, 5 * 1000)
  }
  handleClick = () => {
    this.setState({needComp: true});
  }
  render() {
    return (
      <>
        <button onClick={()=> {console.log(this.state.needComp)}}>log</button>
        <button onClick={this.handleClick}>load comp</button>
        {this.state.needComp ? <Comp/> : "loding"}
      </>
    );
  }
}
// the page should render two Comps after 5 seconds, but only one shows
// another Comp doesn't  show until you click another App's 'load comp' button
render(<><App/><App/></>, document.getElementById('root'));