Unable to validate Klarna Payment, Value typed for Date Of Birth is not retained on checkout (Selenium, Chrome Driver)

Question

Update:: I tried using sendKeys() I get some weird 5 or 66 alone being typed inside the text box. Attached image.

sendKeys("Feb 11 2001 (Central European Summer Time)"); sendKeys("2001-02-23")

Screenshot of text box with 66.* value on sendkeys("2011-02-23")

The date of birth input element (as shown in the attached images) is being filled properly. However, on moving to the next control the value of the DOB field, is either hidden or masked. Then on click of the continue button the validation error throws. I have attached screenshots of these three steps from the screen recording. Below is the selenium method where I am trying to access the control inside the iframe. Any help in this regard would be appreciated.

public void confirmsPaymentWithKlarnaInvoice(){

        klarnaInstantBuyButton.waitUntilEnabled().click();
        switchToIFrame();
        WebDriver driver = getDriver();
        WebElement selectElem = driver.findElement(By.id("invoice_kp-purchase-approval-form-user-title"));
        WebElement selectOpt = selectElem.findElements(By.tagName("option")).get(1);
        selectElem.click();
        selectOpt.click();

        if(driver instanceof JavascriptExecutor) {
          ((JavascriptExecutor)driver).executeScript("arguments[0].value='23.01.2012'", klarnaInvoiceDOB);
        }
        klarnaInvoiceKpContinueButton.click();
        klarnaInstantCheckoutSuccess.shouldBeVisible();
    }


      @FindBy(id="invoice_kp-purchase-approval-form-date-of-birth")
        private WebElementFacade klarnaInvoiceDOB;

The input element inside the inframe is as follows,

<input id="invoice_kp-purchase-approval-form-date-of-birth" name="dateOfBirth" type="tel" mask="DD.DD.DDDD" placeholder="" maxlength="10" size="10" style="background-color: transparent; border: none; box-sizing: border-box; outline: none; box-shadow: none; caret-color: rgb(72, 123, 148); color: rgb(23, 23, 23); -webkit-text-fill-color: rgb(23, 23, 23); opacity: 1; font-family: &quot;Klarna Text&quot;, &quot;Klarna Sans&quot;, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 16px; height: 60px; overflow: hidden; padding-left: 0px; padding-top: 18px; position: absolute; text-overflow: ellipsis; top: 0px; margin-left: -1px; margin-top: 2px; white-space: nowrap; width: 100%; -webkit-font-smoothing: antialiased; text-rendering: geometricprecision;"/>

Screenshot of the control with value

Text box value hidden when it moves to next control

Validation error thrown on button click

P.S: Even If I try to type into the input box after the dropdown, its the same. I have the same validation error.