title: redux-toolkit -> non-serializable value detected
body: <p><strong>Error:</strong></p>
  <blockquote>
  <p>index.js:1 A non-serializable value was detected in an action, in the
  path: <code>payload.config.transformRequest.0</code>.</p>
  </blockquote>
  <p>Value: ƒ</p>
  <blockquote>
  <p>transformRequest(data, headers) {</p>
  </blockquote>
  <blockquote>
  <pre><code>normalizeHeaderName(headers, 'Accept');
  normalizeHeaderName(headers, 'Content-Type');
  
  if (utils.isFormData(data) || utils.isArrayBuffer(data) || utils.i…
  </code></pre>
  </blockquote>
  <p><strong>Slice:</strong></p>
  <pre><code>export const getProducts = createAsyncThunk(
      'products/getProducts', 
      async() =&gt; {
          const res = await axios.get('http://localhost:5000/products/view-products', {withCredentials: true});
          return res;
      }
  )
  
  const getProductsSlice = createSlice({
      name : 'products',
      initialState : {
          list : [],
          status : null
      },
      extraReducers : {
          [getProducts.pending] : (state) =&gt; {
              state.status = 'loading'
          },
          [getProducts.fulfilled] : (state, {payload}) =&gt; {
              console.log(&quot;produtcts payload: &quot;, payload.data)
              state.list = payload.data
              state.status = 'success'
          },
          [getProducts.rejected] : (state) =&gt; {
              state.status = 'failed'
          }
      }
  })
  </code></pre>
  <p><strong>Inside Component:</strong></p>
  <pre><code>const dispatch = useDispatch();
      const data = useSelector(state =&gt; state.products.list);
      console.log(&quot;the products are :&quot;, data);
  
      useEffect(() =&gt; {
          dispatch(getProducts());
      }, [dispatch]);
  </code></pre>
  <p>Other slices in the app work fine. Having a hard time working around <strong>the non-serializable</strong></p>