extraReducers in redux toolkit is not catching an action

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import request from '../../utils/request';

export const fetchReports = createAsyncThunk(
  'reports/fetchReports',
  async (Criteria, thunkAPI) => {
    const url = '/fetchReport';
    const options = { method: 'POST', data: { Criteria: { ...Criteria } } };
    const response = await request(url, options);
    return response.ReportData;
  },
);

export const clinicReportsSlice = createSlice({
  name: 'reports',
  initialState: {
    reports: {}
  },
  reducers: {
  },
  extraReducers: {
    [fetchReports.fulfilled]: (state, action) => {
      console.log("INFO: Action Called!!") ---------------> not able to see this log
    },
  },
});

export default clinicReportsSlice.reducer;

So, I am able to see the action "reports/fetchReports/fulfilled" is called inside the devtools. but unfortunately for me, it is not taking any effect in extraReducers

I have even tried hard coding the action name, which obviously will not make any difference. But still, I tried.

'reports/fetchReports/fulfilled': () => {
      console.log('asdf');
 },

Can you think of any possible reason why it is not working?

my configuration is like this and it is required for the existing code to work without any errors.

export const store = configureStore({
  reducer: allReducers,
  middleware: (getDefaultMiddleware) => {
    console.log(getDefaultMiddleware().concat(apiMiddleware));
    return [getDefaultMiddleware()[1], apiMiddleware];
  },
});