Переключение цветовой темы в react

Нужно сделать переключение тем (светлая/темная), чтобы при переключении данные вносились в redux и cookie. Вот мой код:

При загрузке приложения происходит инициализация. Если файла cookie еще нет, он создается (light):

export const initializeApp = () => (dispatch) => {
    if (!getCookie('theme')) {
        dispatch(toggleTheme('light'));
    } else {
        dispatch(toggleTheme(getCookie('theme')));
    }
}

Функция toggleTheme:

export const toggleTheme = (theme) => {
    setCookie('theme', theme);
    return ({ type: TOGGLE_THEME, payload: { theme } });
}

reducer:

let initialState = {
    initialized: false,
    theme: null
};

const appReducer = (state = initialState, action) => {
    switch (action.type) {
        case TOGGLE_THEME:
            return {
                ...state,
                theme: action.payload.theme
            }
        default:
            return state;
    }
}

компонента:

const ThemeToggler = (props) => {
    const dispatch = useDispatch()
    const onToggleTheme = () => {
        if (getCookie('theme') === 'light') {
            dispatch(props.toggleTheme('dark'));
        } else if (getCookie('theme') === 'dark') {
            dispatch(props.toggleTheme('light'));
        }
    }

    return (
        <label id={s.switch} className={s.switch}>
            <input type={'checkbox'} onChange={onToggleTheme} id={s.slider} />
            <span className={cn(s.slider, s.round)}></span>
        </label>
    )
}

Функции getCookie, setCookie:

import Cookie from 'js-cookie';

const getCookie = (cookieKey) => {
    return Cookie.get(cookieKey);
};


import Cookie from 'js-cookie';

const setCookie = (cookieKey, cookieValue) => {
    Cookie.set(cookieKey, cookieValue, {
        path: '/'
    });
};

Проблема в том, что после первого переключения cookie не меняется. Т.е. при загрузке устанавливается начальное значение, можно 1 раз нажать на кнопку - работает, а потом нет. Надеюсь на Вашу помощь.