How to stop executing when an error occurs?

[notflip]

Let's say I have the code below, I want to make sure that when the onError is hit (API request returns error) that the (...) loading indictator in the message list stops, and that the form resets. How can we do this?

When I try to call the stop() method in the onError, it doesn't do anything. The state is "error" but the input field is still in processing mode. I can see "Press Enter again to interrupt"

"use client";

import { useChat, type Message } from "@ai-sdk/react";
import { Chat as ChatComponent } from "@/components/ui/chat";
import { toast } from "sonner";

interface ChatProps {
  initialMessages?: Message[];
  chatId?: string;
}

export default function Chat({ initialMessages, chatId }: ChatProps) {
  const { messages, input, handleInputChange, handleSubmit, status, stop } =
    useChat({
      maxSteps: 3,
      initialMessages: initialMessages,
      sendExtraMessageFields: true,
      id: chatId,
      onError: (error) => {
        toast("Error");
      },
    });

  return (
    <ChatComponent
      messages={messages as any}
      input={input}
      handleInputChange={handleInputChange}
      handleSubmit={handleSubmit}
      isGenerating={status !== "ready"}
      stop={stop}
    />
  );
}