I have this function that fetches all CSS properties and values of an element:

function getAllCssPropertiesAndValues(element: Element) {
    const style = window.getComputedStyle(element)
    const propertiesAndValues = {}

    for (let i = 0; i < style.length; i++) {
        const propertyName = style[i]
        const value = style.getPropertyValue(propertyName)
        propertiesAndValues[propertyName] = value
    }

    return propertiesAndValues
}

I simply use it by

cy.get('#my-element').then($el => {
    console.log(getAllCssPropertiesAndValues($el[0]))
})

The output I get in the console is as expected, the CSS properties:

When I try to make it its own custom command, I no longer get the expected CSS properties:

This is the custom command I am working on:

export {}

declare global {
    namespace Cypress {
        interface Chainable {
            getAllCssPropertiesAndValues: typeof getAllCssPropertiesAndValues
        }
    }
}

const getAllCssPropertiesAndValues = (element: Element) => {
    const style = window.getComputedStyle(element)
    const propertiesAndValues = {}

    for (let i = 0; i < style.length; i++) {
        const propertyName = style[i]
        const value = style.getPropertyValue(propertyName)
        propertiesAndValues[propertyName] = value
    }

    return propertiesAndValues
}

Cypress.Commands.add('getAllCssPropertiesAndValues', getAllCssPropertiesAndValues)

Am I perhaps missing or understanding something wrong here?