too many rerenders on using useState

I am calling the contactsfunction from the main return. I don't see any error until here:

 const showContacts = React.useCallback(    (data: UsersQueryHookResult) => {      if (data) {        return (<View style={styles.users}></View>        );      }    },    [userData],  );  const contacts = () => {    console.log('running');    const { loading, error, data } = useUsersQuery({      variables: {        where: { id: 34 },      },    });    console.log('DATA COMING', data);    //setUserData(data);    //console.log('contact name', data.users.nodes[0].userRelations[0].relatedUser.firstName);  };  return (<SafeAreaView style={{ flex: 1 }}><Container style={{ flex: 1, alignItems: 'center' }}><Item style={styles.addToWhitelist}><Icon            name="add"            onPress={() => navigation.navigate('AddContactTry')}          /><Text style={styles.addToContactTitle}>Add contact</Text></Item><Text onPress={() => navigation.navigate('Home')}>Zurück</Text><View style={{ width: moderateScale(350) }}><Text>Keine Kontacte</Text></View>        {contacts()}</Container></SafeAreaView>  );};

Now I want to do some conditional rendering on the basis of the results from contacts. However, as soon as I uncomment setUserData(data); I get an error that too many re-renders. I don't get what I am doing wrong in showUsersto get this error.

Edit:

I tried this but it gives an invalid hook call error:

export const Whitelist: React.FunctionComponent = (props) => {  const [userData, setUserData] = useState<UsersQueryHookResult>(''); useEffect(() => {    // Your function to fetch/get contacts    const data = contacts();    setUserData(data);  }, [])  const showContacts = React.useCallback(    (data: UsersQueryHookResult) => {      if (data) {        return (<View style={styles.users}></View>        );      }    },    [userData],  );  const contacts = () => {    console.log('running');    const { loading, error, data } = useUsersQuery({      variables: {        where: { id: 34 },      },    });    console.log('DATA COMING', data);    //setUserData(data);  };  return (<SafeAreaView style={{ flex: 1 }}><Container style={{ flex: 1, alignItems: 'center' }}><Item style={styles.addToWhitelist}><Icon            name="add"            onPress={() => navigation.navigate('AddContactTry')}          /><Text style={styles.addToContactTitle}>Add contact</Text></Item><Text onPress={() => navigation.navigate('Home')}>Zurück</Text>        {/* {contacts()} */}</Container></SafeAreaView>  );};