показать элементы на основе раздела

Я хотел показать раздел и элемент, относящийся к этому разделу. Я имею в виду следующий способ

Просроченный

item1

item2

item3

Нет срока

item1

item2

item3

Я пробовал описанный ниже способ, но так я не смог сгенерировать указанный выше пользовательский интерфейс. Как это сделать?

У меня есть следующие данные, поступающие с сервера: время_пуска, время_кончания, время_поминания, заголовок, _id

Вот что я пробовал

const
    ListItem = ({task}) => {
        const
            current_time = new Date();
        if (current_time > task.end_time) {
            return <View key={task._id} style={{flexDirection: 'column', flex: 1}}>
                <Text>overdue</Text>
                <Text>{task.title}</Text>
                <Text>{task.start_time}</Text>
            </View>
        }
        return (
            <View key={task._id} style={{flexDirection: 'column', flex: 1}}>
                <Text>{task.title}</Text>
                <Text>{task.start_time}</Text>
            </View>
        )
    }

const List = ({query}) => {
    console.log('query', query);
    if(query.loading) return <Text>Loading...</Text>
    if(query.error) return <Text>Error...</Text>
    return (
        <Wrapper>
                <View style={{flexDirection: 'row', marginLeft: 10, marginTop: 10}}>
                    <Image
                        resizeMode="contain"
                        source={newIcon}
                        style={{width: 25, height: 25}}
                    />
                    <Text
                        style={{
                            alignSelf: 'center',
                            color: '#1F84DD'
                        }}>
                        New Task
                    </Text>
                </View>
                <FlatList
                    data={query.tasks}
                    renderItem={({item}) => <ListItem task={item} />}
                />
        </Wrapper>
    )
}

пробовал использовать SectionList следующим образом

<SectionList
    sections={[
        {title: 'Overdue', data:query.tasks.filter(task => task.end_time < new Date())},
        {title: 'Upcoming', data:query.tasks.filter(task => task.end_time > new Date())}
    ]}
    renderItem={({item}) => <Text>{item}</Text>}
    renderSectionHeader={
        ({section}) => <Text>{section.title}</Text>
    }
/>

Таким образом я получаю ошибку

нарушение инварианта: объекты недействительны как дочерние объекты React (найдено: объект с ключами _id, start_time, end_time, remcer_time)