How to resolve that after searching request a property name has changed to a property id?

I am using a React Native Expo web app for the frontend and Django for the backend.

I have a search function that works fine. But the problem I am facing is that after a search term the property name of a specific animal has changed to a property id (number).

What I mean with this is that in the accordion the category name is shown. But after the search the category id is displayed.

In the frontend I have an accordion with some properties. The property for category looks:

export const AccordionItemsProvider = ({ children }) => {   
    const [categoryExpanded, setCategory] = useState(false);
    

    const accordionItems = (item) => {
        return (
            <>
            
                <List.Accordion
                    title="Familie"
                    expanded={categoryExpanded}
                    onPress={() => setCategory(!categoryExpanded)}>
                    <Text>{item.category}</Text>
                </List.Accordion>
                
            </>
        );
    };

    return (
        <AccordionItemsContext.Provider
            value={{
                accordionItems,
            }}>
            {children}
        </AccordionItemsContext.Provider>
    );
};

So the name of category will be displayed. But after the search the id of category will be displayd. And not the name.

The search context of animal looks:

/* eslint-disable prettier/prettier */

import React, { createContext, useEffect, useState } from "react";

import { fetchAnimalData } from "./animal/animal.service";
import useDebounce from "../hooks/use-debounce";

export const SearchAnimalContext = createContext();
export const SearchAnimalContextProvider = ({ children }) => {
    const [searchAnimal, setSearchAnimal] = useState([]);
    const [results, setResults] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [input, setInput] = useState("");
    const debounce = useDebounce(input, 500);

    useEffect(() => {
        if (debounce === "") {
            setResults([]);
            return;
        }
        fetchAnimalData(debounce)
            .then((response) => {
                setResults(response);
            })
            .catch((err) => {
                setError(err);
            });

        fetchAnimalData();
    }, [debounce]);

    const performSearch = async (text) => {
        if (text.trim() === "") {
            setResults([]);
        }
        setLoading(true);
        setError(null);
        setTimeout(() => {
            fetchAnimalData(text)
                .then((response2) => {
                    setResults(response2);
                    console.log(response2);

                    setLoading(false);
                })
                .catch((err) => {
                    setLoading(false);
                    setError(err);
                });
        }, 100);
    };
    return (
        <SearchAnimalContext.Provider
            value={{
                results,
                setResults,
                searchAnimal,
                setSearchAnimal,
                input,
                setInput,
                performSearch,
                loading,
                error,
            }}>
            {children}
        </SearchAnimalContext.Provider>
    );
};

And the output after a search request of the console.log looks:

category
: 
30
category_name
: 
"Katachtigen - Felidae"

So before the search category is displayed correctly: “Katachtigen – Felidae”. But after the search category is displayed as 30 – category_id: which is not correct.

And the seach function in the component looks:

import React, { useContext, useEffect, useState } from "react";
import { SafeArea } from "../../../components/utility/safe-area.component";
import { SearchAnimalContext } from "../../../services/search-animal.context";
import { fetchSubCategoryData } from "../../../services/category/category.service";

export const SubCategoryScreen = ({ route, navigation }) => {
    
    const [isLoading, setLoading] = useState(true);
    const { performSearch, results, setInput, input } = useContext(SearchAnimalContext);    
    const [isSearchbarFocused, setSearchbarFocused] = useState(false);  

    useEffect(() => {
        fetchSubCategoryData(route.params.subcategories).then((data) => {
            setSubCategoryList(data.animals.length > 0 ? data.animals : data.subcategories);
            setLoading(false);
        });
    }, [route]);

    const handleSearchChange = (text) => {
        setInput(text);
        if (text.length === 0) {
            performSearch(""); 
            navigation.navigate("dieren");
        } else {
            performSearch(text);
        }
    };



    return (
        <SafeArea>
            {isLoading && (
                <LoadingContainer>
                    <ActivityIndicator animating={true} color={MD2Colors.green200} />
                </LoadingContainer>
            )}
            <Searchbar
                placeholder="Search animals"
                value={input}
                onFocus={() => setSearchbarFocused(true)}
                onChangeText={handleSearchChange}
                onBlur={() => setSearchbarFocused(false)}
                style={styles.searchbar}
            />
            
        </SafeArea>
    );
};

And the model animal from the backend looks:

import sys
from io import BytesIO
from django.db import models

class Animal(models.Model):   
    name = models.CharField(max_length=100, verbose_name="Naam")
    sort = models.CharField(max_length=100, default='',  
    category = models.ForeignKey(
        Category, related_name='animals', on_delete=models.CASCADE, verbose_name="Familie")   

    def category_name(self):
        return self.category.name
   

    class Meta:
        verbose_name = "Dier"
        verbose_name_plural = "Dieren"
        # permissions = [("set_display_flag", "Check name is display or not",)]

   
        super(Animal, self).save()

    def __str__(self):
        return self.name

How to display the correct category name and not the category id after a search request?