Minified React error #31 with sharepoint online using React + redux tookit

Question

Getting error when getting the state from store. Minified Error when building the project Typescript version: 4.2.4 SPFX version: 1.14 @reduxjs/toolkit": "^1.9.3" @types/react-redux": "^7.1.25" react-redux": "^8.0.5" redux": "^4.2.1" redux-thunk": "^2.4.2"

Store.js

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import fileCollectionSlice from "./features/fileCollection";
export const store =  configureStore({
  reducer: {
    fileCollection: fileCollectionSlice
  }
});

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

=========================================================================== fileCollection.ts

import { createSlice } from '@reduxjs/toolkit';

export interface fileCollectionState {
    fileCollection: any[];
  }
  
  const initialState: fileCollectionState = {
    fileCollection: []
  };

const fileCollectionSlice = createSlice({
  name: 'fileCollection',
  initialState: initialState,
  reducers: {
    addFile: (state, action) => {
        state.fileCollection.push(action.payload);
    },
    removeFile: (state, action) => {
        // return state.fileCollection.filter(file => file.id !== action.payload);
        state.fileCollection = state.fileCollection.filter((file) => file.id !== action.payload);
    },
  }
});

export const { addFile, removeFile } = fileCollectionSlice.actions;
export default fileCollectionSlice.reducer;

========================================================================= Component

import { useDispatch, useSelector } from 'react-redux';
import { useAppSelector, useAppDispatch } from "./../store/hooks";
import { RootState } from '../store/store';


    public async componentDidMount() {
        const fileCollection = useSelector((state: RootState) => state.fileCollection);
        above code is where the error occurs..
    }