Error: Objects are not valid as a React child If you meant to render a collection of children, use an array instead. Why?

Why I got this error?

Error: Objects are not valid as a React child (found: object with keys {id, unitPrice, organizationId, passTypeId, sellerPaymentId, createdAt, BarionPOSKey, passTickets, userId, userName, capacity, validatedAt, paymentOrPass, organizationName, imgId, sellerPaymentProvider, status, paymentId}). If you meant to render a collection of children, use an array instead.

I have this types:

export type BuyTicket2OutData = {
  price?: string;
  pricingOptions?: PricingOptions;
  pass: Pass;
};

export type Pass = {
  id: string;
  passTypeId: string;
  paymentId: string;
  createdAt: string;
  validatedAt: string;
  sellerPaymentId: string;
  organizationName?: string;
  userId: number;
  userIdFb?: string;
  userName?: string;
  unitPrice: string;
  status?: string;
  capacity: number;
  passTickets: {
    [eventTimeId: string]: PassTicket;
  };
  imgId?: string;
};

axios({
  method: "post",
  url: "buyTicket2",
  data: data,
  headers: {
    "Content-Type": "application/json",
    crossDomain: true,
  },
}).then((res) => {
  setBuyTicketData2(res.data.data); // <--- got here the error
});

This is the useState:

  const [buyTicketData2, setBuyTicketData2] = useState<
    BuyTicket2OutData | undefined
  >(undefined);

See those values here: