React Component testing with API request intercept resets to blank page

[piyush-sb]

Trying to individually test a react component (part of our product dashboard) with multiple dropdowns which needs an API response on mount to decide the dropdown options. But when I test the component in cypress using mount, it intercepts the request but then it instantly reloads the the page in browser to the same cypress file but with a blank page thus failing the cy.get part ( antd library uses input fields in dropdowns )
This is the test code
describe("Filters mounts", () => { it("mounts", () => { cy.intercept("/app.filtersMetadata*", { statusCode: 200, body: { success: true, msg: { ORGANIZATIONS: { options: [ { label: "All organizations", value: "all", }, ], }, INTEGRATIONS: { options: [ { label: "All apps", value: "all", }, ], }, CATEGORY: { options: [ { label: "All categories", value: "all", }, ], }, }, uiVersion: "1.2.3", }, }).as("filtersData"); cy.mount( <Routes> <Route path={"/dashboard/accounts"} element={<CustomFilters pageId={"accountsPage"} />} ></Route>{" "} </Routes> ); cy.wait("@filtersData"); cy.get("input").should("have.length", 4); }); });
In Browser testing result:

Custom mount command:

Component file:

initializeFilters method hits the server to fetch the dropdown options.

Readable Test Code Snippet:

Any help would be highly appreciated.