GameList_component.tsx

export const GameList = () => {
  const {isLoading, data} = useGetGames();

  const [gameLikes, setGameLikes] = React.useState<any>({});

  const likeGame = (id: number) => {
    setGameLikes((prevState: any) => {
      return {
        ...prevState,
        [id]: prevState[id] ? prevState[id] + 1 : 1,
      };
    });
  };

  return isLoading ? (
    <Box
      flex={1}
      backgroundColor="black"
      alignItems="center"
      justifyContent="center">
      <Spinner color="purple.500" size="lg" testID="spinner" />
    </Box>
  ) : (
    <View testID="list">
      <Box>
        {data?.pages
          ?.map((page: {results: any}) => page.results)
          .flat()
          .map((game: any) => (
            <GameItem
              game={game}
              likes={gameLikes[game.id]}
              likeFn={() => likeGame(game.id)}
            />
          ))}
      </Box>
    </View>
  );
};