Render a function with onError

I have this object that I want to render when an error occurs while running a grapqhl query (on Apollo's onError):

export const ErrorContainer: React.FunctionComponent = () => {  console.log('container running')  return (<View style={styles.errorView}><Text style={styles.errorText}>Unable to Load Friends</Text></View>  );};

Now on my main screen, I tried this:

const { data, error } = useGetMyProfileQuery({  onCompleted: () => {    //setUserData(data)  },  onError: ErrorContainer  },});

I also tried this:

{error && <ErrorContainer />}

return (<SafeAreaView style={styles.safeView}><Container style={styles.container}><Text          style={styles.backText}          onPress={() => navigation.navigate('Home')}>          Zurück</Text><View style={styles.listHolder}>        {data && <FlatList            data={data.me.friends}            horizontal={false}            renderItem={({ item }) => (<Friend                friend={item}                //onDeleteFriend={onDeleteFriend}                originatorId={data.me.id}              />            )}            keyExtractor={(item) => item.id.toString()}            ListEmptyComponent={NoFriendsContainer}          />            }            {error && ErrorContainer}</View></Container></SafeAreaView>  );

but although I see the console logs, i dont see the actual content of the ErrorContainer. How else should I call the component?