How to build a search function in react native app?

I have a react native app. And I have a search function. The problem I am facing is that the search function only works when the whole word has been entered in the textfield.

So for example Edelhert works. But if a user types in: Ed – then nothing happens.

And if a user waits for a second in the search textfield. Then this error pops up:

VM270:1  Uncaught SyntaxError: Unexpected identifier 'Promise'

So the search api looks:

import { API_URL } from "@env";
import { retrieveToken } from "../../services/authentication/token";

export const fetchAnimalData = async (text) => {
    const token = await retrieveToken();
    try {
        if (token) {
            const response = await fetch(`${API_URL}/api/animals/?name=${text}`, {
                method: "GET",
                headers: {
                    Authorization: `Token ${token}`,
                    Accept: "application/json",
                    "Content-Type": "application/json",
                },
            });
            return await response.json();
        } else {
            throw new Error(token);
        }
    } catch (error) {
        console.error("There was a problem with the fetch operation:", error);
        throw error;
    }
};

and the search context:

/* eslint-disable prettier/prettier */

import React, { createContext, useEffect, useState } from "react";
import { fetchAnimalData } from "./animal/animal.service";
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("");

    useEffect(() => {
        fetchAnimalData();
    }, [searchAnimal]);

    const performSearch = async (text) => {
        setLoading(true);
        setError(null);
        setTimeout(() => {
            fetchAnimalData(text)
                .then((response2) => {
                    setResults(response2);
                    setLoading(false);
                })
                .catch((err) => {
                    setLoading(false);
                    setError(err);
                });
        });
    };
    return (
        <SearchAnimalContext.Provider
            value={{
                results,
                setResults,
                searchAnimal,
                setSearchAnimal,
                input,
                setInput,
                performSearch,
                loading,
                error,
            }}>
            {children}
        </SearchAnimalContext.Provider>
    );
};

And the component with the searchfield:

import React, { useContext, useState } from "react";

import { AccordionItemsContext } from "../../../services/accordion-items.context";
import { AnimalDetailToggle } from "../../../components/general/animal-detail-toggle-view";
import { CategoryContext } from "../../../services/category/category.context";
import { CategoryInfoCard } from "../components/category-info-card.component";
import { SafeArea } from "../../../components/utility/safe-area.component";
import { SearchAnimalContext } from "../../../services/search-animal.context";
import { Searchbar } from "react-native-paper";

export const CategoryScreen = ({ navigation }) => {
    useContext(AccordionItemsContext);  
    const { loading, categoryList } = useContext(CategoryContext);
    const { performSearch, results, setInput, input } = useContext(SearchAnimalContext);
    const [searchTimer, setSearchTimer] = useState(null);

    return (
        <SafeArea>
            {loading && (
                <LoadingContainer>
                    <ActivityIndicator animating={true} color={MD2Colors.blue500} />
                </LoadingContainer>
            )}
            <Searchbar
                placeholder="search animalll"
                onChangeText={(text) => {
                    if (searchTimer) {
                        clearTimeout(searchTimer);
                    }
                    if (!text.length) {
                        setInput("");
                        return;
                    }

                    setInput(text.substring(0));
                    setSearchTimer(setTimeout(performSearch(text), 1000));
                }}
                value={input}
            />

        </SafeArea>
    );
};

What I already have done? Of course googled a lot. Watching youtube clips. For example this one:

https://www.youtube.com/watch?v=i1PN_c5DmaI

But I don’t see the mistake that prevents partly searching for a word.

Question: how to implement partly searching for a word?