How to connect to nextjs websocket from external react

I am trying to send messages over a websocket from nextjs to a separate react app but new to websockets and not sure how to do it so any help would be appreciated, I can send a message from my nextjs client to the websocket via api but how do I connect to the websocket from another application? Sometimes get this error: http://localhost:3000/socket.io?EIO=4&transport=polling&t=OTv_Djk 404
Not Found

nextjs _app.tsx:

  import { io } from 'socket.io-client';

  const socket = io('http://localhost:3000', {
     path: '/api/socket'
  });

  useEffect(() => {
    socket.emit('createdMessage', 'message');
  }, []);

api/socket.ts:

export default function SocketHandler(_: NextApiRequest, res: NextApiResponseServerIO) {
  if (res.socket.server.io) {
    res.end();
    return;
  }

  const io = new Server(res.socket.server as any, {
    path: '/api/socket',
    cors: {
      origin: ['*']
    }
  });
  res.socket.server.io = io;

  const onConnection = (socket: any) => {
    messageHandler(io, socket);
  };

  io.on('connection', onConnection);
  res.end();
}

function messageHandler(_: any, socket: any) {
  const createdMessage = (msg: string) => {
    console.log('createdMessage', msg);
    socket.broadcast.emit('newIncomingMessage', msg);
  };

  socket.on('createdMessage', createdMessage);
}

separate app made with CRA (does not connect to websocket):

  const { lastMessage, readyState } = useReactWebSocket(
    'ws://localhost:3000',
    {
      retryOnError: false,
      reconnectAttempts: Number.MAX_SAFE_INTEGER,
      reconnectInterval: 5000,
      shouldReconnect: () => isMounted.current
    },
    true
  );

  console.log({ lastMessage, readyState })

Only way I could get it to work is with a custom nextjs server.