separate a page to components in react

this is one of my pages in react app and it shows everything ok:

const showAllFavorite = (props) => {
    const [favorites, setFavorites] = useState([]);

    useEffect(async () => {
        const resp = await generalGet({}, '/favorite');
        setFavorites(resp.data);
    }, [])
    return(

        <React.Fragment>
            <MainMenu title="favorites" history={props.history}/>
            <div className="container mt-4">
                <div className="d-flex flex-wrap">
                    {
                        favorites.map(fav => (
                            <div style={{flex: '50%'}}>
                                <Link
                                    to={`/recipe/${fav.id}`}
                                    key={fav.id}
                                >
                                    <FoodItem
                                        className="foodItem"
                                        name={fav.name}
                                        cover={fav.cover}
                                        width={'auto'}
                                    />
                                </Link>
                            </div>
                        ))
                    }
                </div>
            </div>
        </React.Fragment>
    )
}
export default showAllFavorite;

but when I want to code like this it doesn't show anything :

const showAllFavorite = (props) => {
    const [favorites, setFavorites] = useState([]);

    useEffect(async () => {
        const resp = await generalGet({}, '/favorite');
        setFavorites(resp.data);
    }, [])
    return(
        <showFoodItems title={"favorite"} items={favorites} history={props.history} />
      
    )
}
export default showAllFavorite;

and my showFoodItem component:

const showFoodItems= ({title , items , history}) => {
    return(
        <React.Fragment>
            <MainMenu title={title} history={history}/>
            <div className="container mt-4">
                <div className="d-flex flex-wrap">
                    {
                        items.map(item => (
                            <div style={{flex: '50%'}}>
                                <Link
                                    to={`/recipe/${item.id}`}
                                    key={item.id}
                                >
                                    <FoodItem
                                        className="foodItem"
                                        name={item.name}
                                        cover={item.cover}
                                        width={'auto'}
                                    />
                                </Link>
                            </div>
                        ))
                    }
                </div>
            </div>
        </React.Fragment>
    )
}
export default showFoodItems;

I want to do this because I want to use the showFoodItems component many times in my app. I checked the network tab and data is receiving from server. do you have any idea?