Компонент Chidren не показывает собственный код

Question

Я пытаюсь вставить компонент из другого класса, но показываю только содержимое главного экрана.

Что случилось, что дочерний компонент не визуализируется? Если выбрана категория состояния, я хочу показать список звуков этого состояния. Иначе я показываю все категории, но не работает.

основной класс (GuidedMeditation)

import Categories from '../../components/Categories';

export default class GuidedMeditation extends Component {
    

    constructor(props) {
                super(props);
        
                this.state = {
                  categorySelected: null,
                };
    
    }

    renderContent(categorie) {

        if(categorie) {
            console.log("list");

            return <MeditationLists />
        } else {
            console.log('categories');
            return  <Categories />
        }
    }

    render() {

    
        return (
            <Container>
                <View>
                    <Text style={styleProperties.titleGuidedMeditation}>
                        Categorias
                    </Text>
                    {this.renderContent(this.state.selectedCategory)}
                </View>
            </Container>
        );
    }
}

Дети (Категории)

export default class Categories extends Component {

    
    render() {
       return(

    <Grid>
            <Row>
                <Col>
                    <ImageBackground source={require('../../assets/images/category01.jpg')}
                                 style={styleProperties.image}
                                 blurType="light"
                                 blurRadius={10}
                                 borderRadius={10}
                    >
                        <Icon type="Feather" name='wind' style={styleProperties.iconCategory}/>
                        <Text style={styleProperties.textCategory} >Meditações para Iniciante</Text>
                    </ImageBackground>
                </Col>
                <Col>
                    <ImageBackground source={require('../../assets/images/category02.jpg')}
                                 style={styleProperties.image}
                                 blurType="light"
                                 blurRadius={10}
                                 borderRadius={10}
                    >
                        <Icon type="Feather" name='moon' style={styleProperties.iconCategory}/>
                        <Text style={styleProperties.textCategory}>Meditações Curtas</Text>
                    </ImageBackground>
                </Col>
            </Row>
            <Row>
                <Col>
                    <ImageBackground source={require('../../assets/images/category03.jpg')}
                                 style={styleProperties.image}
                                 blurType="light"
                                 blurRadius={10}
                                 borderRadius={10}
                    >
                        <Icon type="Feather" name='droplet' style={styleProperties.iconCategory}/>
                        <Text style={styleProperties.textCategory}>Redução do Estresse</Text>
                    </ImageBackground>
                </Col>
                <Col>
                    <ImageBackground source={require('../../assets/images/category04.jpg')}
                                 style={styleProperties.image}
                                 blurType="light"
                                 blurRadius={10}
                                 borderRadius={10}
                    >
                        <Icon type="Feather" name='sun' style={styleProperties.iconCategory}/>
                        <Text style={styleProperties.textCategory}>Meditações Longas</Text>
                    </ImageBackground>
                </Col>
            </Row>
            <Row>
                <Col>
                    <ImageBackground source={require('../../assets/images/category05.jpg')}
                                 style={styleProperties.image}
                                 blurType="light"
                                 blurRadius={10}
                                 borderRadius={10}
                    >
                      <Icon type="Feather" name='activity' style={styleProperties.iconCategory}/>
                      <Text style={styleProperties.textCategory}>Movimentos Corporais</Text>
                    </ImageBackground>
                </Col>
                <Col>
                    <ImageBackground source={require('../../assets/images/category06.jpg')}
                                 style={styleProperties.image}
                                 blurType="light"
                                 blurRadius={10}
                                 borderRadius={10}
                    >
                         <Icon type="Feather" name='list' style={styleProperties.iconCategory}/>
                        <Text style={styleProperties.textCategory}>Todas as Meditações</Text>
                    </ImageBackground>
                </Col>
            </Row>
        </Grid>  
            )
    }
}

Некоторые идеи для решения ?

Спасибо!