Running the multiple scenarios in a single feature files fails in cypress

Question

For Cypress cucumber project, I have 1 feature file login.feature which has 2 scenario outlines

1. Valid Login
2. Invalid Login

When I am running the login.feature file. The Valid login scenario has a checkpoint to verify I am on the homepage. Which it takes times to verify and within couple of seconds, it moves to the next scenarios causing the first scenario to failed.

If i run both of them one by one, Nothing is failing. Cypress uses their own feature to wait for the particular element to check and then move to next one. But here, it is waiting for sometime and gradually moving to the next scenario.

login.feature

Feature: Login to Application

As a valid user I want to log in to the Application

@login
Scenario Outline: Valid Login
    Given user open the login Page
    When user enter a username "<userName>"
    And user enter a password "<password>"
    And user click the sign-in button
    Then user should be able to login

Examples:
|   userName       | password    |
|     abc          | ########### |


@login
Scenario Outline: Invalid Login
    Given user open the login Page
    When user enter a username "<userName>"
    And user enter a password "<password>"
    And user click the sign-in button
    Then error should displayed as "<error_message>"

Examples:
| userName   | password       | error_message     |
| admin      | sd444-fdf-ffr  | Unable to sign in |

login_steps.js

import { Given, When, And, Then } from "cypress-cucumber-preprocessor/steps";
import loginPage from "../pageObjects/pages/login_page";

before(() => {
  cy.log("I will only run before the first scenario of login.feature");
});

beforeEach(() => {
  cy.log("I will run before each Scenario of login.feature");
});

Given("user will run before all the scenarios", () => {
  cy.log("Scenario - Started");
});

Given("user open the login Page", () => {
  loginPage.visitLoginPage();
});

When("user enter a username {string}", (username) => {
  loginPage.fillUsername(username);
});

And("user enter a password {string}", (password) => {
  loginPage.fillPassword(password);
});

And("user click the sign-in button", () => {
  loginPage.submitLoginDetails();
});

Then("user should be able to login", () => {
  loginPage.checkLoginSuccess();
});

Then("error should displayed as {string}", (error_message) => {
  loginPage.checkErrorMessage(error_message);
});

login_page.js

class loginPage {
    static visitLoginPage() {
        cy.visit('/');
        cy.url().should('include', 'login');
    }

    static fillUsername(username) {
        cy.get('#abc').type(username);
    }

    static fillPassword(password) {
        cy.get('#def').type(password);
    }

    static submitLoginDetails() {
        cy.get('[type="submit"]').click();
    }

    static checkLoginSuccess() {
        cy.get('#large-device').should('be.visible');
    }

    static checkErrorMessage(error_message) {
        cy.get('#form1').should('contain.text', error_message);
    }

    static loginWithValidCredentials(username, password) {
        cy.visit('/');
        cy.url().should('include', 'login')
        cy.get('#abc').type(username);
        cy.get('#def').type(password);
        cy.get('[type="submit"]').click();
    }
}

export default loginPage

Let me know for any more information. I am new to cypress cucumber. Please help me out here.