Getting Error -

A non-serializable value was detected in the state, in the path: user.$$typeof. Value: Symbol(react.element) Take a look at the reducer(s) handling this action type: cake/ordered.

cakeSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

type InitialState = {
  numOfCakes: number
}
const initialState: InitialState = {
  numOfCakes: 20
}

const cakeSlice = createSlice({
  name: 'cake',
  initialState,
  reducers: {
    ordered: state => {
      state.numOfCakes--
    },
    restocked: (state, action: PayloadAction<number>) => {
      state.numOfCakes += action.payload
    }
  }
})

export default cakeSlice.reducer
export const { ordered, restocked } = cakeSlice.actions

Cake.tsx

import React from 'react'
import { useAppDispatch, useAppSelector } from '../../app/store'
import { ordered, restocked } from './cakeSlice'

const Cake = () => {
    const numOfCakes = useAppSelector((state) => {
        return state.cake.numOfCakes
    })
    const dispatch = useAppDispatch();
  return (
      <div>
          <h2> No Of Cakes :- {numOfCakes}</h2>
          <button onClick={() => {
              dispatch(ordered())
          }}>Order Cake</button>
          <button onClick={() => {
              dispatch(restocked(100))
          }}>Restock Cake</button>
      </div>
  )
}

export default Cake