Solve 'Uncaught TypeError: dispatch is not a function' in JavaScript?

import { useCallback, useContext } from "react";
import { useDispatch, useSelector } from "react-redux";
import Counter from "../components/Counter";
import { decrease, increase } from "../modules/counter";
import ColorContext from "../contexts/color";

const CounterContainer = () => {
  const {state} = useContext(ColorContext);

  const {number} = useSelector(({counter}) => ({
    number : counter.number,
  }));
  const dispatch = useDispatch();
  **const onIncrease = useCallback(() => dispatch(increase()), [dispatch]);
  const onDecrease = useCallback(() => dispatch(decrease()), [dispatch]);**

  return(
    <Counter state={state} number={number} onIncrease={onIncrease} onDecrease={onDecrease} />
  );
};

export default CounterContainer;

----------------------------------------------------------------------------------
import { createAction, handleActions } from "redux-actions";

const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);

const initialState = {number : 0};

const counter = handleActions(
  {
    [INCREASE] : state => ({number : state.number + 1}),
    [DECREASE] : state => ({number : state.number - 1}),
  },
  initialState
);

export default counter;

--------------------------------------------------------------

Can anyone help?? This is pretty easy for you guys I guess but I don't know why... I used useDispatch and useSeletor instead of connect. So I hope the replies would be without those.

Current Output: CounterContainer.js:14 Uncaught TypeError: dispatch is not a function at CounterContainer.js:14:1 at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

My expect: If I click increase button, the number increase...