Input values are not submitted on a second submission on my Livewire form

On my Livewire form I have a few text inputs which uses wire:model.defer

<input type="text" wire:model.defer="otp1" >
<input type="text" wire:model.defer="otp2" >

<button class="btn btn-primary" wire:click="verifyOTP">
    Verify
</button>

When I click a button to submit this form on the first time, the form is submitted properly. I can get the values in otp1 and otp2.

But, if I click the same button to submit this form again on a second or third time, the values for otp1 and otp2 will be empty, although I can still see the values for the two text inputs on the page.

Below is my component code:

class OTPForm extends Component
{
    public $otp1;
    public $otp2;

    public function verifyOTP() {
        $otp_attempt = $this->otp1 . $this->otp2;
        dd($otp_attempt);
    }
}

I cannot just use wire:model nor wire:model.lazy

Although I can see the values on the page, in the text inputs, the values are not present in $this->otp1 and $this->otp2 on subsequent submissions.

However, if I re-enter (re-type) the values in the text inputs, then they will be submitted and present in $this->otp1 and $this->otp2.

How can I fix this problem, or if there is a workaround?

Simple: remove the dd. By using dd you're stopping Livewire from completing its full cycle and thus won't be able to send the data back to the frontend. It's basically unable to properly hydrate the properties.