UI doesn't re-render after mutation

  const [todos, setTodos] = useState(useTodoStore);
  //watch todos
  useEffect(() => {
    console.log("todos", todos);
  }, [todos]);

  function getTodos() {
    return Promise.resolve(todos);
  }

  function updateTodo(todo: any) {
    todo.completed = !todo.completed;
    const newTodos = todos.map((t: any) => (t.id === todo.id ? todo : t));
    setTodos(newTodos);
    return Promise.resolve(todo);
  }

  function deleteTodo(id: number) {
    const newTodos = todos.filter((todo: any) => todo.id !== id);
    setTodos(newTodos);
    return Promise.resolve({});
  }

  const { data, isLoading, isError } = useQuery({
    queryKey: ["todos"],
    queryFn: getTodos,
  });

  const updateMutation = useMutation({
    mutationFn: (newTodo) => {
      return updateTodo(newTodo);
    },
    onSuccess: (newTodo) => {
      queryClient.invalidateQueries(["todos"]);
    },
  });

  const deleteMutation = useMutation({
    mutationFn: (todo: any) => {
      return deleteTodo(todo.id);
    },
    onSuccess: (id) => {
      queryClient.invalidateQueries(["todos"]); // Invalidate the entire todos list
    },
  });