I fetched data from server in my demo app with React Query useQuery() hook. I have data(type of array which hold elements with type=”game” or type=”individualTraining”) present inside component but I can’t use map() function to render it conditionally on the screen. Do you see what is problem?

function Calendar(props) {
  const id = 3;
  const { data, isPending, isLoading, isError, error } = useQuery({
    queryKey: ["calendar"],
    queryFn: () => {
      return fetchUpcomingGames(id);
    },
  });

  let content;

  if (isPending) {
    content = "Loading...";
  }
  if (isError) {
    content = "Error occurred: " + error.message;
  }
  if (data) {
    content = (
      <div className={`${classes.gameAndIndTraContainer}`}>
        {data.map((element) => {
          element.type === "game" ? <h1>Game</h1> : <h1>IndividualTraining</h1>;
        })}
      </div>
    );
  }
  return <>{content}</>;
}

export default Calendar;

`

I tried to convert data to array with Object.values(data) and it also shows nothing on the screen