Reactjs – ExtraReducers is not working in redux-toolkit

I have setup redux store using redux-toolkit library.

This is index.ts

const createStore = () =>
  configureStore({
    reducer: rootReducer,
    devTools: false,
    middleware: getDefaultMiddleware => {
      const middleware = getDefaultMiddleware({
        immutableCheck: false,
        serializableCheck: false,
      });
      if (process.env.NODE_ENV !== "production") {
        middleware.push(logger);
      }
      return middleware;
    },
  });

export const store = createStore();
export const persistor = persistStore(store);

This is rootReducer.ts

import { combineReducers, Reducer, AnyAction } from "@reduxjs/toolkit";
import storage from "redux-persist/lib/storage";
import { persistReducer } from "redux-persist";
import userCompnaySlice from "./slices/userCompnaySlice";

const userCompanyDataPersistConfig = {
  key: "userCompanyData",
  storage,
};

const appReducer = combineReducers({
  userCompany: persistReducer(userCompanyDataPersistConfig, userCompnaySlice.reducer),
});

export type RootState = ReturnType<typeof appReducer>;

const rootReducer: Reducer = (state: RootState, action: AnyAction) =>
  appReducer(state, action);

export default rootReducer;

This is userCompanySlice.ts:

import { createSlice } from "@reduxjs/toolkit";
import { userCompanyReducer } from "../../utils/types/reducerStateTypes";
import { getCompanyInfo } from "../thunks/userCompanyThunk";

const initialState: userCompanyReducer = {
  userInfo: {},
  companyInfo: {},
};

const userCompanySlice = createSlice({
  name: "userCompany",
  initialState,
  reducers: {
    setUserInfo: (state, action) => {
      state.userInfo = action.payload;
    },
    setCompanyInfo: (state, action) => {
      state.companyInfo = action.payload;
    },
  },
  extraReducers: {
    [getCompanyInfo.pending.type]: (state, action) => {
        console.log("pending");
    },
    [getCompanyInfo.fulfilled.type]: (state, action) => {
        console.log("fulfilled");
      state.companyInfo = action.payload;
    },
    [getCompanyInfo.rejected.type]: (state, action) => {
        console.log("rejected");
    },
  },
});

export const { setUserInfo, setCompanyInfo } = userCompanySlice.actions;

export default userCompanySlice;

This is userCompanyThunk.ts file:

import { createAsyncThunk } from "@reduxjs/toolkit";
import axiosApiInstance from "../../services/axios";
import { companyAPI } from "../../shared/api/apiRoutes";

export const getCompanyInfo = createAsyncThunk(
  "userCompany/getCompanyInfo",
  async () => {
    try {
      const response = await axiosApiInstance.get(companyAPI);
      console.log(response.data["data"]);
      console.log("Action type:", getCompanyInfo.fulfilled.type);
      return response.data["data"];
    } catch (e: any) {
    //   if (e.response.status >= 400 && e.response.status < 599) {
    //     throw new Error(e.response.data.message);
    //   }
    console.log(e);
    }
  }
);

Now when I call getCompanyInfo it executes successfully & also printing the resoponse.
But this is not invoked in extraReducers in userCompanySlice.ts.

This is how im executing getCompanyInfo:

useEffect(() => {
    console.log("get company");
    dispatch(getCompanyInfo());
    getCompany();
  }, [dispatch]);

The function executes in useEffect & also prints the response got from API but does not invoke the extraReducer.
Hence the state does not get updated.

I want the extraReducers to work when getCompanyInfo is called & set the companyInfo state.

I have used a similar aproach in my previous project & just copy pasted it in this project. But for some reson it doesn’t work here.

Thanks for the help!