Parece que puede estar mejor con un botón para agregar nuevos elementos de carga a la lista. Aquí hay un ejemplo rápido.

 const { useState } = React; function Example() { // Simple counter in state. You may prefer this to be // an array, or an object that you can add item objects to const [counter, setCounter] = useState(0); // Returns an array of divs based on the counter value function getDivs() { const divs = []; for (let i = 0; i < counter; i++) { divs.push(<div>{i + 1}</div>); } return divs; } // Updates the counter function handleClick() { setCounter(counter + 1); } return ( <div> <div className="divs"> {getDivs()} </div> <div className="counter">Div count: {counter}</div> <button type="button" onClick={handleClick}> Add new div </button> </div> ); } ReactDOM.render( <Example />, document.getElementById('react') );

 .divs { border: 1px solid #676767; padding-left: 0.3em; } .divs, .counter { margin-bottom: 1em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>