Can't access Redux Toolkit Query Error Property

Good day Devs.

I am pretty new on Redux toolkit query and I can't figure out what I am missing... Its been 2 days I have been on this.

My Challenge: I deliberately returned an error from my server and was hoping that RTK Query will handle the error property as explained here but RTKQ keeps seeing it as isSuccess

Below is my slice code snippet

export const giftcards = apiSlice.injectEndpoints({
endpoints: builder => ({
    getGiftcards: builder.query({
        query: () => ({ url: `/giftcards`, method: 'get', headers: getHeaders(), }),
        transformResponse: resp => giftcardsAdapter.setAll(initialState, resp?.data )
    }),
    getRates: builder.query({
        query: ( params ) => ({
            // Note I deliberately omitted the params; in other for the server to return an error message
            url: '/giftcard_rates', method: 'get', headers: getHeaders()
        })
    }),
}),
overrideExisting: true,

})

Below is my RTKQ hook found in my component.

const { isLoading, isSuccess, data : rates, error, isError } = useGetRatesQuery({ id,cid})

I expect to get isError to be true, and error should contain the error message. However, RTQ is seeing the error as isSuccess; below is the log message:

console.log({isError,error,isSuccess,isError,rates})

{
"error": undefined,
"isError": false,
"isSuccess": true,
"rates": Object {
    "error": Object {
        "data": Object {
            "message": "Country Id and Giftcard Id can not be empty.",
        },
        "status": 434,
    },
},

}

My code for the error message

I believe the server is returning a valid error object, but why is RTK Query not seeing it as error.?

Thank you in advance!!!