How to pass id with api call with react native?

I have a react native app. And I try to pass the id with a api call. For the backend I am using django framework
If I do it hardcoded then it works. But if I pass the id then I get this error:

There was a problem with the fetch operation:, [Error: Network response was not ok]

So this is my service call:

export const fetchSubCategoryData = async (id) => {
    try {
        const response = await fetch(`http://192.168.1.68:8000/api/categories/${id}/`, {
            method: "GET",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
            },
        });
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }

        return await response.json();
    } catch (error) {
        console.error("There was a problem with the fetch operation:", error);
        throw error;
    }
};

But if I do this:

const response = await fetch(`http://192.168.1.68:8000/api/categories/${2}/`

Then it works

And this is the component that triggers the api call:

export const SubCategoryScreen = ({ route }) => {
    const [subCatgoryList, setSubCategoryList] = useState([]);

    useEffect(() => {
        fetchSubCategoryData(route.category).then((data) => {
            setSubCategoryList(data);
        });
    }, [route.category]);

    return (
        <SafeArea>
            <CategoryList
                data={subCatgoryList}
                renderItem={({ item }) => {
                    return (
                        <TouchableOpacity onPress={() => console.log(item)}>
                            <Spacer position="bottom" size="large">
                                <SubCategoryInfoCard category={item} />
                            </Spacer>
                        </TouchableOpacity>
                    );
                }}
                keyExtractor={(item) => item.id}
            />
        </SafeArea>
    );
};

So and this component you will navigate to SubCategoryScreen:

export const CategoryScreen = ({ navigation }) => {
    const { loading, error, categoryList } = useContext(CategoryContext);
    return (
        <SafeArea>
            {loading && (
                <LoadingContainer>
                    <ActivityIndicator animating={true} color={MD2Colors.green200} />
                </LoadingContainer>
            )}
            <Search />
            <CategoryList
                data={categoryList}
                renderItem={({ item }) => {
                    console.log(item.id);
                    return (
                        <TouchableOpacity
                            onPress={() => navigation.navigate("groepen", { subcategories: item.id })}>
                            <Spacer position="bottom" size="large">
                                <CategoryInfoCard category={item} />
                            </Spacer>
                        </TouchableOpacity>
                    );
                }}
                keyExtractor={(item) => item.id}
            />
        </SafeArea>
    );
};

the api call from the backend looks:

http://192.168.1.68:8000/api/categories/2/

Question: How to pass the id as parameter within the url?

subcategories is an array of objects:

Object {
  "animals": Array [],
  "category": null,
  "description": "vogels",
  "eaza": "",
  "id": 2,
  "images": "http://192.168.1.68:8000/media/photos/categories/birds.png",
  "legislation": "",
  "name": "vogels",
  "review": "",
  "subcategories": Array [
    Object {
      "description": "roofvogels",
      "id": 3,
      "images": "http://192.168.1.68:8000/media/photos/categories/predator_ETI4KPC.jpg",
      "name": "roofvogels",
    },
    Object {
      "description": "parkieten",
      "id": 5,
      "images": "http://192.168.1.68:8000/media/photos/categories/01-smartest-birds-NationalGeographic_2467639.webp",
      "name": "parkieten",
    },
    Object {
      "description": "",
      "id": 12,
      "images": "http://192.168.1.68:8000/media/media/photos/categories/seagull.png",
      "name": "meeuwen",
    },
  ],
}

So I try it like:

export const SubCategoryScreen = ({ route }) => {
    const [subCatgoryList, setSubCategoryList] = useState([]);
    const [isLoading, setLoading] = useState(true);

    useEffect(() => {
        fetchSubCategoryData(route.params.subcategories).then((data) => {
            setLoading(false);
            console.log(data);
            setSubCategoryList(data);
        });
    }, [route]);

    return (
        <SafeArea>
            {isLoading && (
                <LoadingContainer>
                    <ActivityIndicator animating={true} color={MD2Colors.green200} />
                </LoadingContainer>
            )}
            <CategoryList
                data={subCatgoryList}
                renderItem={({ item }) => {
                    return (
                        <TouchableOpacity onPress={() => console.log(item)}>
                            <Spacer position="bottom" size="large">
                                <SubCategoryInfoCard subcategories={item} />
                            </Spacer>
                        </TouchableOpacity>
                    );
                }}
                keyExtractor={(item) => item.id}
            />
        </SafeArea>
    );
};

Then I still get this error:

Invariant Violation: TaskQueue: Error with task : Tried to get frame for out of range index NaN