Doing CRUD using useReducer Hook in ReactJs update tod doesnot work

Question

--> context/TodoContext.js // the main problem is that suppose i added a todo and when i click on edit then all todos disappers like when i refresh the page but the todo gets updadted and only that todo(that i updated) appears on todo list.so i need that if i click on edit and updated a todo all remaining tod0 remains same as before .

export const todosReducer = (state, action) => {
  switch (action.type) {
    case "CREATE_TODO":
      return {
        todos: [...state.todos, action.payload],
      };
    case "DELETE_TODO":
      return {
        todos: state.todos.filter((t) => t.id !== action.payload.id),
      };
    case "UPDATE_TODO":
      const updatedTodo = action.payload;
      const updatedTodos = state.todos.map((todo) => {
        if (todo.id === updatedTodo.id) {
          return updatedTodos;
        }
        return todo;
      });
      return {
        ...state,
        todos: updatedTodo,
      };
    default:
      return state;
  }
};

export const TodosContextProvider = ({ children }) => {
  const [editing, setEditing] = useState(false);

  const [state, dispatch] = useReducer(todosReducer, {
    todos: [],
  });
  return (
    <TodosContext.Provider value={{ ...state, dispatch, editing, setEditing }}>
      {children}
    </TodosContext.Provider>
  );
};

--> components/Form.js

function Form() {
  const { todos, dispatch, editing, setEditing } = useContext(TodosContext);
  const [todo, setTodo] = useState({
    title: "",
    desc: "",
  });

  const handleChange = (e) => {
    setTodo((prev) => {
      return {
        ...prev,
        [e.target.name]: [e.target.value],
      };
    });
  };

  const handleUpdate = (e) => {
    setEditing(false);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!todo.title || !todo.desc) {
      alert("Please enter all fields !!!");
    } else {
      const newTodo = {
        //   id: todos.length === 0 ? 1 : todos[todos.length - 1].id + 1,
        id: todos.length + 1,
        title: todo.title,
        desc: todo.desc,
      };
      dispatch({ type: "CREATE_TODO", payload: newTodo });
      setTodo({
        title: "",
        desc: "",
      });
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="title"
          placeholder="title..."
          onChange={handleChange}
          value={todo.title}
        />
        <input
          type="text"
          name="desc"
          placeholder="description..."
          onChange={handleChange}
          value={todo.desc}
        />
        {editing ? (
          <button onClick={handleUpdate}>Update</button>
        ) : (
          <button>Submit</button>
        )}
      </form>
      <h2 style={{ textAlign: "center", margin: "10px 0px" }}>TODOS LIST :</h2>
      {todos.map((todo) => {
        return <SingleTodo todo={todo} setTodo={setTodo} />;
      })}
    </div>
  );
}

-->components/SingleTodo.js

const SingleTodo = ({ todo, setTodo }) => {
  const [updatedTodo, setUpdatedTodo] = useState([]);
  const { dispatch, setEditing } = useContext(TodosContext);

  const handleDelete = () => {
    dispatch({ type: "DELETE_TODO", payload: todo });
  };

  const handleEdit = (t) => {
    setEditing(true);
    setUpdatedTodo(t);
    setTodo(t);
    dispatch({ type: "UPDATE_TODO", payload: updatedTodo });
  };

  return (
    <div key={todo.id} className="todo">
      <h1>
        {todo.id}. {todo.title}
      </h1>
      <h3>" {todo.desc} "</h3>
      <button onClick={handleDelete}>Delete</button>
      <button onClick={() => handleEdit(todo)}>Edit</button>
    </div>
  );
};