Error: Actions must be plain objects. Use custom middleware for async actions

export const increment = () => {
    return {
        type: 'INCREMENT'
    }
}

export const decrement = () => {
    return {
        type: 'DECREMENT'
    }
}

const counter = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}

export default counter;

import counter from './counter.js';
import { combineReducers } from 'redux';

const allReducers = combineReducers({
    counter
});

export default allReducers;

import React from 'react';
import { increment } from '../redux/actions/action.js';
import { useSelector, useDispatch } from 'react-redux';

function Component() {
    const counter = useSelector(state => state.counter);
    const dispatch = useDispatch();

    return (
        <div className="component">
            <h1 style={{ color: "#fff" }}>{counter}</h1>
            <button onClick={() => dispatch(increment)}>CLICK</button>
        </div>
    )
}

export default Component;