I'm working on fetching data with React and graphql and render it with react/pdf-renderer.

I use renderContent but it gives me this error. What I'm doing wrong?

Uncaught TypeError: Cannot read properties of undefined (reading 'bookingConfirmationNumber')at renderContent

Below is my code

const renderContent = () => {
    const hotelDetails: HotelDetailsType = data.getHotelDetailsByIds.items[0]

    return (
      <PDFViewer>
        <Document>
          console.log(hotelDetails.bookingConfirmationNumber)
          <Page>

            <View>
                <Text>{hotelDetails.bookingConfirmationNumber}</Text>
                <Text>{hotelDetails.hotelName}</Text>
                <Text>{hotelDetails.address}</Text>
                <Text>{hotelDetails.hotelContactNumber}</Text>
                <Text>{hotelDetails.guestName}</Text>
                <Text>{hotelDetails.guests.adults}</Text>
                <Text>{hotelDetails.guests.children}</Text>
            </View>
          </Page>
        </Document>
      </PDFViewer>      
  )}

Here is my schema

export type HotelDetailsType = {
  bookingConfirmationNumber: string
  hotelName: string
  address: string
  hotelContactNumber: string
  guestName: string
  guests: HotelGuestsType
}

I tried optional chaining, it renders the PDF component but data were not being fetched and Query is working fine in Graphql. Any inputs and resource to read on is highly appreciated.

Thank you.

Update:

hotelDetails is indeed sending undefined. But I still can't figure out why. If I query directly in graphql it is working. Please see below additional info.

const InvoicePDFModal: React.FC<InvoicePDFModalProps> = ({ hideModal, hotelBookingId }) => {
  const profile = useSelector(selectedCustomerProfileSelector)
  const { data, loading, error } = useQuery(GET_HOTEL_DETAILS_BY_IDS, {
    variables: {
      hotelDetailIds: [hotelBookingId],
      customerId: profile.userId
    }
  })

Graphql snip https://imgur.com/LVjghjy

I really appreciate the help guys. Thank you so much.