How to prevent react is rendering 2 times

I am facing a problem where the react is rendering 2 times but I do not see any problem in the code or it is come from the socket? I noticed this problem when consoling and when displaying data, the data duplicate. Below I put my client react code with the server socket code.

React client

import "./App.css";
import io from "socket.io-client";
import { useEffect, useState } from "react";

const socket = io.connect("http://localhost:3001");

function App() {
  const [text, setText] = useState("");
  const [room, setRoom] = useState("");
  const [data, setData] = useState([]);
  const [action, setAction] = useState(true);

  console.log("data", data);
  console.log(text);
  console.log(room);

  const sendMessage = () => {
    socket.emit("send_message", { text, room });
  };

  const joinRoom = () => {
    if (room !== "") {
      socket.emit("join_room", room);
    }
  };

  useEffect(() => {
    socket.on("receive_message", (msg) => {
      setData((prev) => [
        ...prev,
        {
          message: msg,
        },
      ]);
    });
  }, [action]);

  return (
    <div className="App">
      {data.map((da) => (
        <p>{da.message}</p>
      ))}

      <input
        type="text"
        placeholder="room no"
        onChange={(e) => {
          setRoom(e.target.value);
        }}
      ></input>
      <button onClick={joinRoom}>Join</button>
      <br />

      <input
        type="text"
        placeholder="message .."
        onChange={(e) => {
          setText(e.target.value);
        }}
      ></input>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
}

export default App;

Socket server

const express = require("express");
const app = express();
const http = require("http");
const { Server } = require("socket.io");
const cors = require("cors");

app.use(cors());

const server = http.createServer(app);

const io = new Server(server, {
    cors: {
        origin: "http://localhost:3000",
        methods: ["GET", "POST"],
    },
});

io.on("connection", (socket) => {
    // console.log(`User Connected ${socket.id}`);

    socket.on("join_room", (data) =>{
        socket.join(data);
    })

    socket.on("send_message", (data) => { 
      socket.to(data.room).emit("receive_message", data.text);
    })
});

server.listen(3001, () => {
    console.log("SERVER OK");
});