Error Boundary does not catch errors of the resource

<ErrorBoundary fallback={ErrorFallback}>
                    <Suspense
                        fallback={
                            <For each={Array(4).fill(0)}>
                                {(_, index) => (
                                    <div class={index() == 0 ? "" : "mt-4"}>
                                        <PetSkeleton></PetSkeleton>
                                    </div>
                                )}
                            </For>
                        }
                    >
                        <For
                            each={
                                families()?.find(
                                    (family) => family.id == selectedFamily()
                                )?.pets
                            }
                        >

const [families, { mutate: mutateFamilies }] = createResource(fetchFamilies);

export const fetchFamilies = async () => {
    const response: Family[] = await sendApiRequest(
        "/api/families",
        "GET",
        false
    );
    return response.sort((a, b) => a.name.localeCompare(b.name));
};