rtk query acting one step behind in setting the states

Question

im using dependency injection in my next.js project by the aidf of inversify librarby this is the rtk api

import { ErrorResponseDto, IResponseDto } from "@/domain/dto";
import baseApi from "../baseApi";
import { SuccessLoginResponseDto } from "@/application/interfaces/handlers/auth";
import { BrandReq } from "@/application/interfaces/handlers/brands";


const brandApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    addBrand: builder.mutation<void, BrandReq>({
      query: (newBrand) => ({
        url: "brand", 
        method: "POST",
        body: newBrand,
      }),
    }),
  }),
});

export const {  addBrand } = brandApi.endpoints;

export default brandApi;

this is my slice

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { BrandState } from "@/domain/entity/brand-entities";
import { addBrand } from "@/infrastructure/redux/apis/brand";
import container from "../../../../../ioc.config";
import { BRANDS_HANDLERS_TYPES } from "@/application/types/handlers/brands";
import type { BrandsHandlersImpl } from "@/application/interfaces/handlers/brands";
import { ErrorResponseDto, IResponseDto } from "@/domain/dto";

const initialState: BrandState = {
  brandList: [],
  loading: false,
  error: null,
};

const brandSlice = createSlice({
  name: "brand",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addMatcher(addBrand.matchPending, (state) => {
      const { pending } = container.get<BrandsHandlersImpl>(BRANDS_HANDLERS_TYPES.BrandsHandlersImp);
      pending(state);
    });
    builder.addMatcher<PayloadAction<IResponseDto<void>>>(addBrand.matchFulfilled, (state, { payload }) => {
      const { success } = container.get<BrandsHandlersImpl>(BRANDS_HANDLERS_TYPES.BrandsHandlersImp);
      success(state, payload);
    });
    builder.addMatcher<PayloadAction<IResponseDto<ErrorResponseDto>>>(addBrand.matchRejected, (state, { payload }) => {
      const { reject } = container.get<BrandsHandlersImpl>(BRANDS_HANDLERS_TYPES.BrandsHandlersImp);
      
      reject(state, payload);
    });
  },
});


export default brandSlice.reducer;

and these are my handlers

@injectable()
export class BrandsHandlers implements BrandsHandlersImpl {
  constructor(
    @inject(STATE_MANAGER_TYPES.PrimaryStateManagerImpl)
    private primaryStateManager: PrimaryStateManagerImpl
  ) {}

  async addBrand(newBrand: BrandReq) {
    return await this.primaryStateManager.setState<BrandReq, IResponseDto<void> | ErrorResponseDto>(
      "addBrand",
      newBrand
    );
  }
  async success(state: BrandState, payload: IResponseDto<void>) {
    // console.log(payload);
    state.loading = false;
    state.error = null;
  }

  async pending(state: BrandState) {
    state.loading = true;
    state.error = null;
  }

   async reject(state: BrandState, payload: IResponseDto<ErrorResponseDto>) {
    // console.log(payload.status);
    
    state.error = payload.status?.toString();
    state.loading = false;
  }
}

the scenario is wheen im requesting in the componenent , when i log the states in thsese files , i see the states have been chnaged but the problem is when i try to access the states from compoenets, i see that altough the ajax reuests are doing welll , but i cant access them from appSelector

  const { error, loading , brandList :brandlist } = useAppSelector((state) => state.brandState);

  const submit = async (data: FormValues) => {
    await brandService.addBrand({ name: data.name });
    console.log(error);
}

i cant access error(and also any other redux states) immidately , its null for first time , the correct value represents after first try , but in first try these are one step behind the funny thing about these is when i return these staes into th tsx i can see the result , but i dodnt have access them from function scope ,