Script does not work for react component

[sureshvg]

Hi,

I am facing issues setting the values for the react component. In the app link i can set first name/last name/email but cannot set the card number/expirydate/cvc number.

My script is below;

setEventName Launch Donation Ladder Page
navigate https://pages.elevate.salesforce.org.per...cytesting2
setEventName Click on Donation Amount
execAndWait document.querySelectorAll('[data-testid="payment-details-button"]')[0].click();
setEventName FillForm
exec var input = document.getElementsByName('firstName')[0];var fieldSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;fieldSetter.call(input, 'testone');input.dispatchEvent(new Event('input', { bubbles: true }));
exec var input = document.getElementsByName('lastName')[0];var fieldSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;fieldSetter.call(input, 'testlast'); input.dispatchEvent(new Event('input', { bubbles: true }));
exec var input = document.getElementsByName("email")[0];var fieldSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;fieldSetter.call(input, 'sureshv1@ymail.com');input.dispatchEvent(new Event('input', { bubbles: true }));
setEventName fill Card Details
execAndWait document.querySelectorAll('[class="sfdo-payments"] input')[0].value = "4111111111111111";
execAndWait document.querySelectorAll('[class="sfdo-payments"] input')[1].value = "02/22";
execAndWait document.querySelectorAll('[class="sfdo-payments"] input')[2].value = "123";
setEventName Donate Now
execAndWait document.querySelectorAll('[data-testid="donate-now-button"]')[0].click();
setActivityTimeout 5000

A sample run : https://webpagetest.org/result/200924_5Q...f3dcdabd8/

Can i get some help on this please.

Thanks !