I'm learning redux and want to pass a function in my store (as I would normally do with prop drilling or the useContext api)

The problem is that I get some errors :

serializableStateInvariantMiddleware.ts:195 A non-serializable value was detected in an action, in the path: `payload.handleNextStep`. Value: () => { console.log("This is my function"); } Take a look at the logic that dispatched this action: {type: 'register/changeStep', payload: {…}}

And an other error complaining about a non serializable value in the state.

Here's my code :

My store configuration :

const store = configureStore({
  reducer: {
    register: registerReducer,
  },
});

The slice :

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

export const registerSlice = createSlice({
  name: "register",
  initialState: {
    value: {
      handleNextStep: () => {}
    },
  },
  reducers: {
    changeStep: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const { changeStep } = registerSlice.actions;
export default registerSlice.reducer;

And finally, the code sample that throws me an error :

  const dispatch =  useDispatch();

  const handleNextStep = () => {
    console.log("This is my function");
  };
  
  useEffect(() => {
    dispatch(changeStep({handleNextStep }));
  }, []);

Am I wrong with the logic I am implementing ? Thanks in advance.