#React - Dynamic List using loop

loop.js

const Square = ( {text} ) => { // Root Functional Component

  console.log("render square:", text);
  
  // View
  return (
   <div style={{display:'table', backgroundColor:'blue'}}> 
      {
      	[1,2,3].map((key) => {
          return (
          	<div key={key} style={{display:'table-cell', backgroundColor:'red'}}>
               { text }
            </div>
          );
         })
      }
   </div>
  );
}

const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(<Square text="Hello!!!"/>)