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

I'm facing an error that has been searching by myself for 2 days. But currently It's still not resolved, so I came here to ask If anyone ever faced this?

I'm using Redux toolkit in a sharepoint online project for passing data to each other components.

The first component worked perfectly, but when I use useSelector function for the 2nd one, this error appears

Although when I tried using console.log for each component, both are still receiving the data but using data for the 2nd component will happen this error.

So has anyone ever faced this please help me out~, here is my codes

slice:

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

export interface titleState {
  title: string;
}

const initialState: titleState = {
  title : 'Your title'
};

export const titleSlice = createSlice({
  name: 'title',
  initialState,
  reducers: {
    SET_TITLE: (state, action) => {
      state.title = action.payload;
    }
  }
});

export const { SET_TITLE } = titleSlice.actions;

export default titleSlice.reducer;

store

import { configureStore } from '@reduxjs/toolkit';
import titleReducer from "../features/titleSlice/titleSlice";
export const store: any = configureStore({
  reducer: {
    title: titleReducer
  },
});

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

first component:

import { useSelector, useDispatch } from "react-redux";
import { AppDispatch, RootState } from "../../../../redux/store/store";

const FirstComponent: FunctionComponent<FirstComponent> = (
  props
) => {
  const STATE_TITLE = useSelector((state: RootState) => state.title);
  console.log(STATE_TITLE);
  const dispatch = useDispatch<AppDispatch>();
const handleTitle = (e) => {
    dispatch(SET_TITLE(e.target.value));
    setTitle(e.target.value);
  }
return (
  <div>
   <textarea
     onChange={handleTitle} //works fine
   />
  </div>
}

second component:

import { useSelector, useDispatch } from "react-redux";
import { AppDispatch, RootState } from "../../../../redux/store/store";
const SecondComponent: FunctionComponent<ISecondComponentProps> = (props) => {
  const TITLE_STATE = useSelector((state: RootState) => state.title)
  console.log(TITLE_STATE)
return (
  <div>
   {YOUR_TITLE} //this line happens error
  </div>
)

and here is the error from development tab :