calling property of api conext, Error: Element type is invalid: expected a string (for built-in components)

I have react native application. And i try to call a property from a component from a api context component.

But I get this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `CellRenderer`.

So of course I googled this error. And it has to do with missing to import the correct component. But

So this is the context component:

import { createContext, useEffect, useState } from "react";
import { fetchCategoryData } from "./category.service";


export const CategoryContext = createContext();

export const CategoryContextProvider = ({ children }) => {
    const [categoryList, setCategoryList] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    const retrieveCategories = () => {
        setLoading(true);
        setTimeout(() => {
            fetchCategoryData()
                .then((results) => {
                    setLoading(false);
                    setCategoryList(results);
                })
                .catch((err) => {
                    setLoading(false);
                    setError(err);
                });
        }, 200);
    };

    useEffect(() => {
        retrieveCategories();
    }, []);

    console.log("NICE CATEGORY", categoryList);

    return (
        <CategoryContext.Provider
            value={{
                categoryList,
                loading,
                error,
            }}>
            {children}
        </CategoryContext.Provider>
    );
};

and this is the component that calls the categoryList from context:

/* eslint-disable prettier/prettier */

import { FlatList, SafeAreaView, StatusBar } from "react-native";
import React, { useContext } from "react";

import { AnimalInfoCard } from "../components/category-info-card.component";
import { CategoryContext } from "../../../services/category/category.context";
import { Searchbar } from "react-native-paper";
import { Spacer } from "../../../components/spacer/spacer.component";
import styled from "styled-components/native";


const SafeArea = styled(SafeAreaView)`
    flex: 1;
    ${StatusBar.currentHeight && `margin-top: ${StatusBar.currentHeight}px`};
`;

const SearchContainer = styled.View`
    padding: ${(props) => props.theme.space[3]};
`;

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

export const CategoryScreen = () => {
    const { categoryList } = useContext(CategoryContext);
    
    return (
        <SafeArea>
            <SearchContainer>
                <Searchbar />
            </SearchContainer>
            <CategoryList
                data={categoryList}
                renderItem={() => (
                    <Spacer position="bottom" size="large">
                        <AnimalInfoCard />
                    </Spacer>
                )}
                keyExtractor={(item) => item.name}
            />
        </SafeArea>
    );
};

So it is about this line:
const { categoryList } = useContext(CategoryContext);

But as you see I import the context:
import { CategoryContext } from "../../../services/category/category.context";

And for example if I do:

const { categoryListTest } = useContext(CategoryContext);

And of course data=data={categoryListTest}

Then there is no error. And the data from the backend is displayed.

Question: how to fix the error:

Error: Element type is invalid: expected a string (for built-in components)