I want to make Todo using local storage as a hook

Question

I am studying reaction-hooks. I'd like to ask for help in the process of creating todo-list.

When input.value enters local storage, local storage enters list, when clicked, changes status to done and recognizes status to enter class. Currently, only double-clicks are available, but I hope only one click is enough.

TodoReducer.js

case "change_status":
    if(localGetItem !== null){
      return localGetItem.map(todo => {
        if(todo.id === +payload) {
          if(todo.status === "done"){
            todo.status = "todo"
          }else {
            todo.status = "done"
          };
          window.localStorage.setItem("todoList",JSON.stringify(todos));
        }
        return todo;
      })
    }

Item.jsx

const Item = ({todo}) => {
  const {dispatch} = useContext(TodoContext);

  const toggleItem = (e) => {
    const id = e.target.dataset.id;
    dispatch({type:'change_status', payload:id});
  }
  const itemClassName = todo.status === 'done' ? 'done' : '';

  return ( 
    <li data-id={todo.id}onClick={toggleItem} className={itemClassName}> {todo.title} </li>
  )
}