Object properties are undefined even it show up in the console log

I am using react-query useMutation in order to call the api and get the response. I am trying to read an array inside the response object. But it is undefined even response can be logged using console log.

This is my useMutation function.

const { mutate, isLoading, data={}, error={} } = useMutation(redeemTicket, {
onSettled: (successData, err) => {
  if (successData && !successData.error) {
    setIsRedeemSuccess(true)
    analytics().logEvent('redemption_success', {
      type: 'scan',
      eventId: selectedEvent.id,
    });
  } else {
    setIsRedeemSuccess(false)
    analytics().logEvent('redemption_failed', {
      error: successData?.error || err?.error || err?.message,
      type: 'scan',
      eventId: selectedEvent.id,
    });
  }
},

});

These are my sample logs.

const scannedData = data?.scanned;
console.log("========================data ", data); // {"scanned":[{"id":1629,"assetId":205042,"redeemStatus":0,"redeemMediaUrl":"https://api.test-yh.io/api/getPubFile?id=1304","section":"3","rowNo":"H2","seatNo":"20","category":"",}],"count":1}
console.log("========================scannedData ", scannedData); // undefined

Can anyone help me on this?