This is my data:

[![enter image description here](https://i.stack.imgur.com/OfJPp.png)](https://i.stack.imgur.com/OfJPp.png)

This is how I get my data and display a Card:

```
// Mainpage Links and Categories //
const MainpageLinks = () => {

    const [mainpageDataCategories, setDataCategories] = useState([]);

    React.useEffect( () => {

        const getMainpageData = async () => {
            let responseMainpage = await axios.get("ajax/api/mainpage_links")
            const responseMainpageData = responseMainpage.data;

            // Get the unique categories
            const arrMainpageData = responseMainpageData.map(m => m.category);
            const setMainpageData = new Set(arrMainpageData);
            const uniqueCategories = Array.from(setMainpageData);
            setDataCategories(uniqueCategories)

            console.log(uniqueCategories);

        }

        getMainpageData();}, []);

    return (

        <>
            {mainpageDataCategories.map(({ mainpageDataCategories }) => (

            <Cards.Item
                overline={mainpageDataCategories}
                headline={mainpageDataCategories}
                thumbIcon={communication___call}
                subline={mainpageDataCategories}
                thumbTitle="Test"
                centeredLayout
                actions={
                    <IconLink
                        icon={communication___call}
                        href="#"
                        look={IconLink.Looks.RIGHT}
                        onClick={() => console.log("IconLink clicked!")}
                    >
                        Mehr erfahren
                    </IconLink>
                }
            />

            ))}
        </>
    );
}

```

The result shows the correct amount of `<Card>` items, but the data is not displayed. The same piece of code works if my data has values like `[{"team": "1", "name": "tom"}]`.

How can I correctly display the values in my array in my `<Card>` item?