I have an api that returns a response in streaming:
i have install @microsot/fetch-event-source
and i did something like this :

import fetchEventSource from '@microsoft/fetch-event-source';
const [myResponse,setmyResponse]=useState<string>()
.
.
.
await fetchEventSource(`${process.env["API_URL"]}/stream`,{
    method: 'POST',
    headers: {
      Authorization : `Bearer ${session.APIToken}`,
      'Content-Type': 'application/json'
      },
    body:JSON.stringify(input),
    async onopen(res) {
      if (res.ok && res.status === 200) {
        console.log("Connection made ", res);
      } else if (res.status >= 400 && res.status < 500 && res.status !== 429) {
        console.log("Client-side error ", res);
      }
    },
    onmessage(event) {
      setmyResponse(myResponse+event.data); 
    },
    onclose() {
      console.log("Connection closed by the server");
    },
    onerror(err) {
      console.log("There was an error from server", err);
    },
    })

(let's suppose that my api returns "Hello World" in streaming)
when i console.log(myRespone) it always be something like : "undefinedHe"
"undefinedllo"
"undefinedWor"
"undefinedld"

how to make myResponse concatinate all the chunks

source codes : https://medium.com/@hxu296/serving-openai-stream-with-fastapi-and-consuming-with-react-js-part-1-8d482eb89702
https://www.npmjs.com/package/@microsoft/fetch-event-source