Cypress: cy.click() failed because this element is detached from the DOM

I am facing an issue with Cypress 4.7.0. Below is the error code that I am getting while I am trying to automate user creation scenario on the website automationpractice.com

cy.click() failed because this element is detached from the DOM.

Cypress requires elements be attached in the DOM to interact with them.

The previous command that ran was:

cy.get()

This DOM element likely became detached somewhere between the previous and current command.

Common situations why this happens: - Your JS framework re-rendered asynchronously - Your app code reacted to an event firing and removed the element

Code for the above scenario is

    describe('Cypress demo script', ()=>{

    it('triage DOM issue',()=>{
        const uuid = () => Cypress._.random(0, 1e6)
        const id = uuid()

        cy.visit('http://automationpractice.com/index.php')
        cy.wait(2000)
        cy.contains('Sign in').click()
        const email ="tester"+id+"@yopmail.com"            
        cy.get('#email_create').type(email)
        cy.get('#SubmitCreate > span').click()

        cy.get('form#account-creation_form').within(($form1)=>{
            cy.get('input#id_gender1').click()            
            cy.get('input#customer_firstname').type('Automation')
            cy.get('input#customer_lastname').type('tester')
            cy.get('input#passwd').click({force:true}).type('Qwerty@123')

        });

    })
})

Based on the searches, it was advised to use {force:true} but this did not worked.Also I tried to embed the searches within the form, but that also did not worked