The array doesnt print its values in React

I am trying to make a socket io simple chat app and the connection works fine. The problems comes with the const renderChat. The console.log is read and correctly printed (with the value in the textbox) also if I put a static text it is also displayed on the frontend, however, for some reason it doesn't print

{msg.data["message"]}

which has to print each value in an array. Also I am almost certain that the array is emptied every time and the useEffect doesn't work properly but I can't really test that yet. Would be glad if I get solution to both problems!

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


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

function App() {
  const [message, setMessage] = useState("");
  const [chat, setChat] = useState([]);
  const sendMessage = () => {
    socket.emit("send_message", { message });
  };

  const renderChat = () => {
    return (
      chat.forEach(msg => {
        <h3>{msg.data["message"]}</h3>
        console.log(msg.data)
      })
    )
  }

    useEffect(() => {
    socket.on("receive_message", message => {
      setChat([...chat, message]);
    });
  }, [socket])
  return (
    <div className="App">
      <input placeholder="Message..." onChange={(event) => {
        setMessage(event.target.value);}}
        />
      <button onClick={sendMessage}>Send Message</button>
      <h1>Message:</h1>
      {renderChat()}
    </div>
  );
}

export default App;

EDIT:

Thanks to Ibrahim Abdallah, now the printing works. The only thing that doesn't work is as I feared, storing the information. Here is the piece of code

  useEffect(() => {
    socket.on("receive_message", message => {
      setChat([...chat, message]);
    });
  }, [socket])

For some reason when I enter for example "text1" it saves it but then if I enter "text2" it overwrites the first value "text1".