title: Minified React error #31 with sharepoint online using React + redux
body: <p>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?</p>
  <p>I'm using Redux toolkit in a sharepoint online project for passing data to each other components.</p>
  <p>The first component worked perfectly, but when I use useSelector function for the 2nd one, this error appears<a href="https://i.stack.imgur.com/iYLYS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iYLYS.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>So has anyone ever faced this please help me out~, here is my codes</p>
  <p>slice:</p>
  <pre><code>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) =&gt; {
        state.title = action.payload;
      }
    }
  });
  
  export const { SET_TITLE } = titleSlice.actions;
  
  export default titleSlice.reducer;
  </code></pre>
  <p>store</p>
  <pre><code>import { configureStore } from '@reduxjs/toolkit';
  import titleReducer from &quot;../features/titleSlice/titleSlice&quot;;
  export const store: any = configureStore({
    reducer: {
      title: titleReducer
    },
  });
  
  export type RootState = ReturnType&lt;typeof store.getState&gt;;
  export type AppDispatch = typeof store.dispatch;
  </code></pre>
  <p>first component:</p>
  <pre><code>import { useSelector, useDispatch } from &quot;react-redux&quot;;
  import { AppDispatch, RootState } from &quot;../../../../redux/store/store&quot;;
  
  const FirstComponent: FunctionComponent&lt;FirstComponent&gt; = (
    props
  ) =&gt; {
    const STATE_TITLE = useSelector((state: RootState) =&gt; state.title);
    console.log(STATE_TITLE);
    const dispatch = useDispatch&lt;AppDispatch&gt;();
  const handleTitle = (e) =&gt; {
      dispatch(SET_TITLE(e.target.value));
      setTitle(e.target.value);
    }
  return (
    &lt;div&gt;
     &lt;textarea
       onChange={handleTitle} //works fine
     /&gt;
    &lt;/div&gt;
  }
  </code></pre>
  <p>second component:</p>
  <pre><code>import { useSelector, useDispatch } from &quot;react-redux&quot;;
  import { AppDispatch, RootState } from &quot;../../../../redux/store/store&quot;;
  const SecondComponent: FunctionComponent&lt;ISecondComponentProps&gt; = (props) =&gt; {
    const TITLE_STATE = useSelector((state: RootState) =&gt; state.title)
    console.log(TITLE_STATE)
  return (
    &lt;div&gt;
     {YOUR_TITLE} //this line happens error
    &lt;/div&gt;
  )
  </code></pre>
  <p>and here is the error from development tab : <a href="https://i.stack.imgur.com/tmVA1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tmVA1.png" alt="enter image description here" /></a></p>