Call signature return types '{ aside: boolean; spinner: boolean; user: User; }' and 'SharedState' are incompatible. Angular11

Question

I'm learning state management in Angular11. When I try to make a reducer I have got an error.

Argument of type '(state: SharedState, action: { aside_status: boolean; } & TypedAction<"[ aside page ] aside"> & { type: "[ aside page ] aside"; }) => { aside: boolean; spinner: boolean; user: User; }' is not assignable to parameter of type 'OnReducer<SharedState, [ActionCreator<"[ aside page ] aside", (props: { aside_status: boolean; }) => { aside_status: boolean; } & TypedAction<"[ aside page ] aside">>]>'.

I have tried like this

export interface SharedState {
  spinner: boolean;
  user: User;
  aside: false;
}
export const Initial_State: SharedState = {
  spinner: false,
  user: <User>{},
  aside: false,
};


export const loading = createAction(
  Loading_Action,
  props<{ spinner: boolean }>()
);

export const aside = createAction(
  Aside_Action,
  props<{ aside_status: boolean }>()
);

const _loading_reducer = createReducer(
  Initial_State,
  on(loading, (state, action) => {
    return {
      ...state,
      spinner: action.spinner,
    };
  }),
  // getting error here
  on(aside, (state, action) => {
    console.log(action);
    return {
      ...state,
      aside: action.aside_status,
    };
  })
);

Spinner one working correctly but aside throw an error.

But When the return type is any error goes no. I want to know why this is this happen.