How would I manage a streamed response from the server?

async function createStream(reader: ReadableStreamDefaultReader<string>): AsyncGenerator<string, undefined, undefined> {
  const { value, done } = await reader.read();
  if (done) return;
  yield value;
  yield* await createStream(reader);
}

async function stream(reader: ReadableStreamDefaultReader<string>) {
  const iterator = createStream(reader);
  for await (const line of iterator) {
    updateDOMSomehow(line);
  }
}

function sendMessage(prompt: string) {
  const response = await fetch("/api/v2/chat", {
    method: 'POST',
    body: JSON.stringify({ prompt }),
  });
  if (!response.ok || !response.body) {
    throw new Error(response.statusText ?? "Something unexpected went wrong");
  }
  const reader = response.body.pipeThrough(new TextDecoderStream())
  return stream(reader);
}

interface ChatBubbleProps {
  // assuming I somehow "return" the response from the mutation
  stream?: Response | undefined;
}

function ChatBubble({ stream }: ChatBubbleProps) {
  const [content, setContent] = useState('');
  useEffect(() => {
    if (stream) {
      streamResponse(stream, setContent);
    }
  }, [stream]);
  // ...
}