Cypress e2e test without using wait function

I'm new in e2e testing with Cypress and I have a question.

I wrote a test and I want not to use Cypress wait() command in it.

it('Should modify checkbox state', () => {
        login();
        cy.visit(TabsSettings.SIZE_FORMATS).then(() => {
            cy.xpath('(//div[@data-qa="sizeFormats"]//*[4]//*//*[1]//*//*//*)[1]', { timeout: 10000 }).click().then(() => {
                expect(
                    cy.xpath('(//input[@type="checkbox"])[1]')
                        .then(checkbox => checkbox).should('be.checked')
                );
            });
            cy.get('span').contains('Change').click().then(() => {
                cy.get('li').contains('Disable').click().then({ timeout: 5000 }, () => {
                    cy.wait(500);
                    cy.xpath('(//div[@data-qa="sizeFormats"]//*[4]//*//*[1]//*//*//*)[1]').click().then(() => {
                        expect(
                            cy.xpath('(//input[@type="checkbox"])[1]')
                                .then(checkbox => checkbox[0]).should('be.checked')
                        );
                    });
                    cy.xpath('(//div[@data-qa="sizeFormats"]//*[4]//*//*[1]//*//*//*)[18]').click().then(() => {
                        expect(
                            cy.xpath('(//input[@type="checkbox"])[2]')
                                .then(checkbox => checkbox[3]).should('not.checked')
                        );
                    });
                });
                cy.xpath('//span[contains(text(), "Disable Selected")]').click().then(() => {
                    cy.get('li').contains('Enable').click().then(() => {
                        expect(
                            cy.get('input[type=checkbox]')
                                .then(checkbox => checkbox).should('not.checked')
                        );
                    });
                });
                cy.get('input[type=checkbox]').then(el => el[0].click()).then(() => {
                    expect(
                        cy.get('input[type=checkbox]')
                            .then(checkbox => checkbox).should('be.checked')
                    );
                }).then(() => {
                    cy.xpath('//i').then(x => x[1].click());
                    cy.get('input[type=checkbox]').should('not.checked');
                });
                cy.get('div[data-main-select=true]').then(list => list[1].click()).then(() => {
                    cy.xpath('(//li[contains(text(), "50")])[1]').click().then(() => {
                        cy.get('input[type=checkbox]').should(checkboxes => {
                            expect(checkboxes).to.have.length(51);
                        });
                    });
                });
                cy.xpath('(//div[@data-qa="sizeFormats"]//*[4]//*//*[1]//*//*//*)[1]').click().then(() => {
                    cy.wait(150);
                    expect(
                        cy.get('input[type=checkbox]')
                            .then(checkbox => checkbox).should('be.checked')
                    );
                });
            });
        });
    });

My problem is that if I not use that cy.wait(500) command, the test fails. I googled a lot but I cannot find an answer for my problem. The project is an React project, using Hooks. What may be caused the problem is that my component renders multiple times after that click() event. The page does not reload, but the main component rerenders several times. If this is the problem, how can I wait for finishing all renderings, and just after that continue the test, without using the wait function ?