next js route api에서 sse 사용하기 질문입니다 센세이

// 클라이언트 코드
'use client';

import axios from "axios";
import { useEffect, useState } from "react";

export default function useCommentStream(){

    useEffect(() => {
        const eventSource = new EventSource('/api/get/stream/comment');
    
        eventSource.addEventListener('msg', (e) => {
            console.log(e)
        })

        return () => {
            eventSource.close()
        }
    });
}
// 서버 코드

import { NextApiRequest, NextApiResponse } from "next";

export default function handler(
    req : NextApiRequest, res : NextApiResponse
){
    res.writeHead(200, {
        "Connection": "keep-alive",
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache",
    });

    res.write('event: msg\n');
    res.write('data: 바보\n\n');
}

요로코롬 적어봤는데 console.log(e) 가 동작하지 않습니다. 상태에도 넣어보고 
useEffect 종속성도 바꿔보고 별짓을 다했는데 잘 안되네요.