useEffect hook re-rendering twice in React & Socket.io-CodePudding

I'm in the process of building a real-time chat app using React and socket to get to grips with the basics. Whenever a user sends a message, all other users receive this same message twice.

I'm using react-router to serve a join 'page' and a chat 'page'.

function App() {
  return (
    <div className="App">

      <Router>
        <Routes>
          <Route path="/" element={<Join />} />
          <Route path="/chat/:name" element={<Chat />} />
        </Routes>
      </Router>

    </div>
  );
}

In the chat page, which is where the messages are being rendered between users, I'm using the useEffect hook however I am struggling to fully understand it.

function Chat () {
  const [messages, addMessage] = useState([{
    username: "chatbot",
    time: new Date(),
    message: "Welcome to the chatroom