I am trying to get a streaming response from the server , it works but with additional details (could be some feature in the future xD!!)
whenever i leave the application window and get back , my nextjs recalls the API function! i don't know what's the problem
here's my function :

const slideGenerator =async (input:unknown)=>{
    setSlides("")
    return new Promise<void>(async(resolve) => {
      fetchEventSource(`${process.env["API_URL"]}/Slides`,{
        method: 'POST',
        headers: {
          Authorization : `Bearer ${session.APIToken}`,
          'Content-Type': 'application/json',
          },
        keepalive:true,
        signal: abortController.signal,
        body:JSON.stringify(input),
        async onopen(res) {
          if (res.ok && res.status === 200) {
            console.log("Connection made ");
          } else if (res.status >= 400 && res.status < 500 && res.status !== 429) {
            throw new Error();
          }
        },
        onmessage(event) {
          if(event.data=="Slide" || event.data=="_slide"){
            resolve()
            setLoader(true)
            setNewSlide((prevValue)=>!prevValue)
          }
          setSlides((prevSlides)=>prevSlides+event.data); 
        },
        onclose() {
          setLoader(false)
          throw new Error();
        },
        onerror(err) {
          setLoader(false)
          throw new Error();
        },
        })
    });
  }
  const onclick =  async (childInput:any) => {
    generator == "Claims" ? await connectToClaimsApp(childInput) : await slideGenerator(childInput)
  };

as you can see the function is triggered onClick by a button
what i have tried :
-removing the useEffect
-playing around with async,await , promise and promise.all

how to make the function triggers only once? and what is causing the call again and again
could this be a bug?