我有一个react原生应用程序，我尝试显示一些数组对象的名称。
这是一个简单的例子：

/* eslint-disable prettier/prettier */

import React, { useContext } from "react";
import { CategoryContext } from "../../../services/category/category.context";
import { CategoryList } from "./category.screen";
import { SafeArea } from "../../../components/utility/safe-area.component";
import { Spacer } from "../../../components/spacer/spacer.component";

import { Text } from "react-native-paper";

const data = [
    {
        name: "roofvogels",
    },
    {
        name: "parkieten",
    },
];

export const SubCategoryScreen = () => {    

    return (
        <SafeArea>
            <CategoryList
                data={data}
                renderItem={({ item }) => {
                    console.log("data", data);
                    return (
                        <>
                            <Spacer position="bottom" size="large">
                                <Text>{data}</Text>
                            </Spacer>
                        </>
                    );
                }}
                keyExtractor={(item) => item.id}
            />
        </SafeArea>
    );
};

类别列表：

export const CategoryList = styled(FlatList).attrs({
    contentContainerStyle: {
        padding: 16,
    },
})``;

如果我这么做

<Text>{data[0].name}</Text>

它的回报是屋顶狗的两倍。
所以我只想显示这两个名字：
屋顶福格尔公园
但如果我试一下，就会得到这个错误：

Error: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.

问：如何显示这两个名称？