Nodejs Server Sent Events reading undefined at the javascript front-end

I am working with mobile wallet gateway for user on a website pay for a service. I need to send every stage and what the server is currently doing all the way to waiting for user response that is entering of pin. The issue is my events are going they the controller when I logged it to the console but the listener I commissioned at the front-end is reporting underfined. I think because its a useEffect it run the state of null first. Please examine the code below and help me with this. Any attempt is well appreciated and God will reward you accordingly.

//env
PAYMENT_EVENT_ENDPOINT= 'http://localhost:8080/api/v1/payment/event-handler'
//---

//route
paymentRouter.get('/event-handler', paymentEventsHandler);
//----

//controller
export const paymentEventsHandler = async (req: Request, res: Response) => {
  try {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    res.flushHeaders();

    const event = req.query.event;
    console.log(event);
    const text = { state: event };
    res.write(`data: ${JSON.stringify(text)}nn`);
  } catch (error) {
    res.status(500).json({ success: false, message: 'Internal server error' });
  }
};
//---

//request

const event_1 = encodeURIComponent('Saving subscription');
      await fetch(`${process.env.PAYMENT_EVENT_ENDPOINT as string}?event=${event_1}`, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },
      });
const event_2 = encodeURIComponent('Saving invoice');
      await fetch(`${process.env.PAYMENT_EVENT_ENDPOINT as string}?event=${event_2}`, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },
      });
const event_3 = encodeURIComponent('Sending payment request');
      await fetch(`${process.env.PAYMENT_EVENT_ENDPOINT as string}?event=${event_3}`, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },
      });
const event_4 = encodeURIComponent('Waiting payment response');
      await fetch(`${process.env.PAYMENT_EVENT_ENDPOINT as string}?event=${event_4}`, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },
      });
const event_5 = encodeURIComponent('Saving payment');
      await fetch(`${process.env.PAYMENT_EVENT_ENDPOINT as string}?event=${event_5}`, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },
      });
/---

// listener at the frontend

useEffect(() => {
    const eventSource = new EventSource('http://localhost:8080/api/v1/payment/event-handler');
    eventSource.onmessage = (event) => {
      const current = JSON.parse(event.data);
      setStatus((prevStatus) => `${prevStatus}n${current.state}`);
    };
    eventSource.onerror = (err) => {
      console.log('Error:', err);
      eventSource.close();
    };

    return () => {
      eventSource.close();
    };
  }, []);

//---

Please help resolve this, thanks