I build an react app, using Scroll component outside CardList component.I used style overflow inside div element in Scroll.js file. When I don't use style overflow then CardList(childern component) shows the content but with style it doesn't. I don't know what mistake I did.

App.js file

render() {
        const filteredRobots = this.state.robots.filter( robot =>{
            return robot.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
        })

        if(this.state.robots.length === 0){
            return <h1>Loading</h1>
        } else {
        return (
            <div className='tc'>
            <h1 className='f1'>RoboFriends</h1>
            <Searchbox searchChange={this.onSearchChange} />
            <Scroll>
            <CardList robots={filteredRobots} />
            </Scroll>
            </div>
    );
        }
}

Scroll.js file

import React from 'react';

const Scroll = (props) => {
    return ( <div style={{overflowY: 'scroll',border:'1px solid red',height:'600px'}}>
    {props.childern}
    </div>
    );
    }

export default Scroll;

Complete Files : https://drive.google.com/drive/folders/1mCWnQhOyf0TuzUJhzwxGa3bnAt3bULmb?usp=sharing