how to make a scrollable list component in react js

// React Scroll Component using CSS
//App.js file begins following code in JSX
const items = [...Array(100)].map((val, i) => `Item ${i}`);

const App = () => (
  <div className="container">
    
    <div className="center-col">
      <span>List</span>
      <ul>
        {items.map((item, i) => (<li key={`item_${i}`}>{ item }</li>))}
          //can be replaced by calling another component instead of List item
      </ul>
    </div>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));
//App,js file ends
-------------------------------------------------------------------------
//CSS File contains the following styles
.container {
  display: flex;
  flex-direction: row;
  height: 100vh;
}


.center-col {
  flex: 1;
  background: #aaa;
  overflow-y: scroll;// This property defines the scrolling 
}
--------------------------------------------------------------------------