Как сделать так, чтобы состояние передавалось из компонента контекста и передавалось в хук useReducer, сохранялось и возвращалось из localStorage

Question

Я не могу найти решение, чтобы сделать состояние из состояния useReducer сохраненным в localStorage и затем возвращенным из localStorage.Я могу сделать это с помощью упрощенных примеров, таких как сохранение счетчика или входных значений, но когда я использую тот же подход в моем текущем приложении, я получаю ошибку, говоря, что мое состояние не определено.

Iпробовал вот так :

const [localState, setLocalState] = useState(state);

useEffect(() => {
    const storageTodos = localStorage.getItem('MY_TODOS_LIST');

    if (storageTodos) {
        setLocalState(JSON.parse(storageTodos));
    }  }, []);

useEffect(() => {
    localStorage.setItem('MY_TODOS_LIST',    JSON.stringify(localState.todos)); 
});

Я хочу, чтобы localStorage сохранил и вернул состояние.

Это ссылка на папку github src