pass updated data in FlatList with useEffect

I run a graphql query and use the results to render some items. This works fine. Now on another screen, I run another mutation using apollos refetch option, such that whenever that mutation is run, the first query will refetch data every where it is being used. The refetching part works fine and I have tested it on other screens.

However, since I am doing some mappings and use setStates, although I get the new data, it is not passed to the FlatList so the FlatList doesn't get updated. On another screen where I am not doing mappings, I am simply passing data into the FlatList and it works well but here, it doesn't.

So how can I fix this? I tried using useEffectbut I don't know what to write inside it.

export const WhitelistBar: React.FC = () => {  const [friendList, setFriendList] = useState<Friend[]>();  const [originatorId, setOriginatorId] = useState<number>();  useEffect(() => {    //setFriendList(DATA);    //console.log('friendlist', friendList);  }, [useGetMyProfileQuery]);  const _onCompleted = (data) => {    console.log('running', data);    let DATA = data.me.friends.nodes.map(      (item: {        id: number;        firstName: string;        rating: number;        vehicles: Vehicle[];        friends: UserConnection;      }) => ({        id: item.id,        imageUrl: defaultUrl,        name: item.firstName,        rating: item.rating,        vehicles: item.vehicles,        numberOfFriends: item.friends.totalCount,            }),    );    setFriendList(DATA);    console.log('daattaaa', DATA);    setOriginatorId(data.me.id)  };  const _onError = () => {    let DATA = [      {        id: 1,        imageUrl: defaultUrl,        name: 'Friend',      },      {        id: 2,        imageUrl: defaultUrl,        name: 'Friend',      },      {        id: 3,        imageUrl: defaultUrl,        name: 'Friend',      },    ];    setFriendList(DATA);    setOriginatorId(0);  };  const { data } = useGetMyProfileQuery({    onCompleted: _onCompleted,    onError: _onError,  });  return (<View style={scaledStyles.container}><View style={scaledStyles.whiteListBarTitle}><Text style={scaledStyles.whiteListBarText}>Meine Freunde</Text></View><View style={{ flexDirection: 'row' }}><FlatList          showsHorizontalScrollIndicator={false}          data={friendList}          horizontal={true}          renderItem={({ item }) => (<WhitelistItem              title={item.name}              face={item.imageUrl}              numberOfFriends={item.numberOfFriends}              vehicles={item.vehicles}            />          )}          keyExtractor={(item) => item.id.toString()}        /></View></View>  );};