Why are all request not showing up in browser?

We can clearly see the allmachine status API call. But also we can not see that in left side.

describe("Dashboard Page test", () => {
    before(() => {
        cy.restoreLocalStorage();
        cy.server()
        cy.route( 
            'GET',
            '/dashboard/v1/public/api/allMachineStatus',
            'fixture:allMachinesStatus'
        )
        // cy.route({
        //     method: 'GET',
        //     url: '/dashboard/v1/public/api/allMachineStatus',
        //     headers: {
        //         "Content-Type": "application/json",
        //         "Authorization": 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1OTI0MDU5NjMsImV4cCI6MTU5NDk5Nzk2MywiaWQiOiIxMDAwIiwiaXNfYWinRydWV9.JaIUHy85pIZ_rulJCZXulVFa4z8kO0'
        //     },
        //     response: 'fixture:allMachinesStatus'
        // })
        cy.visit('/')
        cy.get('[data-testid="side-bar')
            .contains('Live Status')
            .click()

    });
    beforeEach(() => {
        cy.wait(100)
    })

    context("it should check headings",()=>{
        it("should check some heading",()=>{
            cy.get('[data-testid="refill-status-heading-live-status"]')
        })
        
    })
})

I am trying to mock the api but it is not giving the response i expect. It is simply making actual api call and getting data.

I have tried the commented code too. But the results are same.
Any one know why is this happening ? I am able to mock POST requests but not GET