Changing from one form to other shows "is not focusable" error for all inputs in that form

Question

I was trying to change form on click of button.

It worked alright but with error:

An invalid form control with name='firstName' is not focusable.

For every input present in that form.
Is there any way to get from 1 form to other without getting any error.

let formChange = document.getElementsByClassName("formChange");
let createAccSignVar = "true";
let signINForm = document.getElementsByClassName("signINForm")[0];
let signUPForm = document.getElementsByClassName("signUPForm")[0];

function toggleSignINUPForms(e) {
  signUPForm.style.display = createAccSignVar ? "none" : "block";
  signINForm.style.display = createAccSignVar ? "block" : "none";
  createAccSignVar = !createAccSignVar;
  e.preventDefault()
}
formChange[0].addEventListener("click", toggleSignINUPForms)
formChange[1].addEventListener("click", toggleSignINUPForms)

.signINForm {
  display: none;
}

<form action="#" method="post" class="signINUPForm signUPForm">
  <input type="text" name="firstName" id="firstName">
  <label for="firstName">First Name</label>

  <button class="formChange">Change to Form 2</button>
</form>
<form action="#" method="post" class="signINUPForm signINForm">
  <input type="text" name="lastName" id="lastName" placeholder=" ">
  <label for="lastName">Last Name</label>

  <button class="formChange">Change to Form 1</button>
</form>

The error was not shown in the VS code editor console but on browser console.
Here is the console Pic

Thanks for help in advance