React: Can’t create li element because Promise();

I cannot figure out how to access this Promise object. How to map this promise? And why my async/await function is returning a promise and not a result object?
Any feedback appreciated.

Promise {<pending>}
 [[Prototype]]: Promise
 [[PromiseState]]: "fulfilled"
 [[PromiseResult]]: Array(2)
   0: "hey"
   1: "bye"
   length: 2[[Prototype]]: Array(0)

import { io } from "socket.io-client";
import { useState, useEffect } from "react";
function App() {
  const [text, setText] = useState("");
  const [socket, setSocket] = useState();
  const [chat, setChat] = useState([]);
  useEffect(() => {...}, []);
***//getting previous chat for new users.***

  useEffect(async () => {
    let mounted = true;
    const response = await fetch("http://localhost:4000/main_chat").then(
      (res) => {
        if (mounted) {
          setChat(res.json());
        }
      }
    );

    return () => (mounted = false);
  }, []);

  useEffect(() => {...},[socket]);

  const handleClick = () => {
    socket.emit("sentFromClient", text);
  };
  return (
    <div>
      <ul>{console.log(chat)}</ul>
      <input value={text} onChange={(e) => setText(e.target.value)}></input>
      <button onClick={() => handleClick()}>enter</button>
    </div>
  );
}

export default App;