Socket.ioでチャット

import Head from 'next/head';
import { useState } from 'react';
import io from "socket.io-client";
import styles from "../styles/Home.module.css";

const socket = io("http://localhost:5000");

export default function Home() {
  const [message, setMessage] = useState("");
  const [list, setList] = useState([]);

  const handleSendMessage = () => {
    socket.emit("send_message", {message: message});
    setMessage("");
  }

  socket.on("received_message", (data) => {
    setList([...list, data]);
  })

  return (
    div className={styles.container}>
      Head>
        title>Create Next App/title>
        link rel="icon" href="/favicon.ico" />
      /Head>
      div className={styles.container}>
        h1>チャットアプリ/h1>
        div className={styles.chatInputButton}>
          input 
            type="text"
            placeholder="chat..."
            onChange={(e) => {setMessage(e.target.value)}}
            value={message}
          />
          button onClick={() => handleSendMessage()}>送信/button>
        /div>
        {list.map((chat) => (
          div className={styles.chatArea} key={chat.message}>
            {chat.message}
          /div>
        ))}
      /div>
    /div>
  )
}

	

const express = require("express");
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server, {
    cors: {
      origin: "http://localhost:3000"
    }
  });

const PORT = 5000;

io.on('connection', (socket) => {
    console.log('a user connected');
    
    socket.on("send_message", (data) => {
        console.log(data);

        io.emit("received_message", data);

    });
    
    socket.on('disconnect', () => {
        console.log('user disconnected');
      });
});

server.listen(PORT, () => {
    console.log('running on ' + PORT)
});