updating state correctly oncompleted query from apollo

Question

so im trying to update an state for each individual case

{buyer.map((x) => {
        return <IdentificationCard id={x.id} />;
     })}

(inside identificationCard component)
const [uploadFile, { data, error }] = useMutation(UPLOAD_ALL_DOCUMENTS, {
  onCompleted({ uploadFile }) {
        const cardFrontDownloadLink = uploadFile.contract.buyer.documents.id_anverse_download_link;
        const cardBackDownloadLink = uploadFile.contract.buyer.documentss.id_reverse_download_link;   
        setFormValues({
           ...formValues,
           buyerData: {
              ...formValues.buyerData,
              buyer: buyer.map((x) => {
                 return x.id == id
                    ? {
                         ...x,
                         idCardFront: cardFrontDownloadLink ? cardFrontDownloadLink : '' ,
                         idCardBack: cardBackDownloadLink ? cardBackDownloadLink : ''
                      }
                    : x
              })
           }
        });
  },
  onError({ imgError }) {
     notification.error({
        message: 'Error',
        description: 'try loading your ID again or check your internet connection'
     });
  }

});

for example, When i drop an image onto the idCardFront, this query returns a link, and then i update the buyer object key with the link as its new value, however heres is my problem, after updating that first state, i try to do the same with the idCardBack on the second mapped IdentificationCard component, and it updates de idCardBack with the new value but also updates the idCardFront with the previous value saved in the previos identificationCard component

im assuming that when i update the state, given that the onCompleted function is being called again after each upload, the map checks the current value and updates the second object, but im not sure how to get out of the function while storing each link on its corresponding key, any help will be much appreciated