hooks mutations - todoProvider with initial set of drafts

TodoProvider.jsx

export const TodoProvider = ({ children }) => {
  // New line here!
  const [draftTodos, setTodoList] = useState();

  const [apiResponse, setApiResponse] = useState(undefined);
  useEffect(() => {
    const fetchTodos = async () => {
      const res = await fetch("./todos.json");
      const response = await res.json();
      setApiResponse(response);
    };
    fetchTodos();
  }, []);


  const existingTodos = useCallback(() => {
    const todoMap = new Map();
    apiResponse?.todos.forEach((todo) => {
        todoMap.set(todo.id, todo);
   });

    return todoMap;
  }, [apiResponse]);

  // Other new line!
    useEffect(() => {
    // pass in initial items from server
    if (!draftTodos && existingTodos().size) {
      // this () is strange because useCallback was used
      setTodoList(existingTodos());
    }
  }, [existingTodos]);

  return  return (
    <TodoContext.Provider value={{
        todoItems: draftTodos ? Array.from(draftTodos.values()) : [],
    }}>
    {children}
    </TodoContext.Provider>
}