items passed into flatList are undefined

I run a graphql query and get back some data.

let DATA;  const { error, data, refetch } = useUsersQuery({    variables: {      where: { id: 1 },    },    onCompleted: () => {      console.log('friendsData', data);      DATA = data.users.nodes[0].userRelations.map(        (item: {          relatedUser: {            firstName: string;            id: number;            rating: number;            vehicles: Array<Vehicle>;            userRelations: Array<User>;          };        }) => ({          id: item.relatedUser.id,          imageUrl: defaultUrl,          name: item.relatedUser.firstName,          rating: item.relatedUser.rating,          vehicles: item.relatedUser.vehicles,          numberOfFriends: item.relatedUser.userRelations.length,        }),      );      console.log('info aabout friends', DATA)    },    onError: () => {      DATA = [        {          id: '1',          imageUrl: defaultUrl,          name: 'Friend',        },      ];    }  }  ,  );

The query is successful and I know that because when I check with console.log('info aabout friends', DATA), I get something like

Array (1){id: 2, imageUrl: "https://i.pinimg.com/originals/19/19/df/1919dfda3b3f19392ddb9205b4e1331c.png", name: "Alice", rating: 2, vehicles: [{numberPlate: "OL-AL-1336", id: 2, __typename: "Vehicle"}], …}

Now I am passing it like this to my flat list:

<FlatList          data={DATA}          horizontal={true}          renderItem={({ item }) => (<WhitelistItem              title={item.name}              face={item.imageUrl}              firstName={item.name}              rating={item.rating}              numberOfFriends={item.numberOfFriends}              vehicles={item.vehicles}            />          )}          keyExtractor={(item) => item.id}        />

However, when I console log and check from my WhitelistItem component, the values for example (firstName) are all undefined and hence nothing is rendered.

type WhitelistItemProps = {  title: string;  face: string;  firstName?: string;  rating?: number;  // numberPlate?: string;  numberOfFriends?: number;  vehicles?: Array<Vehicle>;};export const WhitelistItem: React.FunctionComponent<WhitelistItemProps> = ({  title,  face,  firstName,  rating,  numberOfFriends,  vehicles,}) => {  console.log('firstname', firstName);  const navigation = useNavigation();  return (<TouchableOpacity      activeOpacity={0.8}><View style={styles.item}><Thumbnail small source={{ uri: face }} style={styles.thumbnail} /><Text numberOfLines={1}>          {title}</Text></View></TouchableOpacity>  );};

This was working previously but when I changed the query structure, it stopped working.

It works like this but not with onCompleted etc:

    const { error, data, refetch } = useUsersQuery({    variables: {      where: { id: 1 },    }});  let DATA;  if (data) {    DATA = data.users.nodes[0].userRelations.map(      (item: {        relatedUser: {          firstName: string;          id: number;          rating: number;          vehicles: Array<Vehicle>;          userRelations: Array<User>;        };      }) => ({        id: item.relatedUser.id,        imageUrl: defaultUrl,        name: item.relatedUser.firstName,        rating: item.relatedUser.rating,        vehicles: item.relatedUser.vehicles,        numberOfFriends: item.relatedUser.userRelations.length,      }),    );  } else {    DATA = [      {        id: '1',        imageUrl: defaultUrl,        name: 'Friend',        vehicles: [],      },      {        id: '2',        imageUrl: defaultUrl,        name: 'Friend',        vehicles: [],      },      {        id: '3',        imageUrl: defaultUrl,        name: 'Friend',        vehicles: [],      },    ];  }