Posts.map не является функцией React Spring Boot WebSocket

в общем у меня проблема. Я хочу отправить сообщение в конечную точку, в которой нужно отправить все сообщения из базы данных в тему веб-сокета, чтобы клиент мог их все получить. Вот мой метод отправки сообщения (я использую MONGODB):

@PostMapping("/send")
    public void sendMessage(@RequestBody Message message){
        mongoTemplate.insert(message);

    simpMessagingTemplate.convertAndSend("/topic/greetings", mongoTemplate.query(Message.class).as(Message.class).all());
    }

В общем ничего из ряда вон выходящего, с этим проблем нет, все в тему, все круто. Теперь все это нужно отловить на клиенте, для этого я написал следующий код:

var stompClient: any = null;
const SockJS = require('sockjs-client')
const Stomp = require('stompjs')
function App() {
  const [posts, setPosts]: any = useState("")
  const [handleInput, setHandleInput] = useState("")


  function setValueInput(e: any){
    setHandleInput(e.target.value);
  }
  function sendMessage(e: any){
    e.preventDefault();
    axios.post('http://localhost:8080/api/send', {
      id: Date.now(),
      text: handleInput,
    })
        .then(function (response) {
          setHandleInput("");
        })
        .catch(function (error) {
          console.info(error);
        });
  }
  useEffect(function (){
      let Sock = new SockJS('http://localhost:8080/ws')

      stompClient= Stomp.over(Sock)

      stompClient.debug = null

      setTimeout(function() {
          stompClient.connect({},function (frame: any){


              console.info(`Connected: ${frame}`)


              stompClient.subscribe("/topic/greetings", function (greeting: any) {
                  console.info(greeting.body)
                  const tempParsedJson = JSON.stringify(greeting.body)
                  console.info(tempParsedJson)
                  setPosts(tempParsedJson)
              });

          }, 1200)})
  }, [])

  return (
    <div className = "App">
        {posts && posts.map((data: any) => (
    <Form key = {data.id} {...data}/>
            ))}
      <div className = {style.dop}>
        <input onChange = {setValueInput} value = {handleInput} className = {style.input}/>
        <a onClick = {sendMessage} className = {style.button}>Submit</a>
      </div>
    </div>
  );
}

export default App;

Короче, успешно подписываемся на тему, опять все хорошо, но пока мне не нужно получить объекты. В консоли вижу это:

Первое — это то, что я получаю от Java, второе — это то, что я пытаюсь перевести в JSON. После отправки сообщений, по моему коду, мы видим, что я пытаюсь отобразить эти данные отдельно в каждом элементе, но при попытке получаю ошибку:

ОШИБКА posts.map не является функцией

Я надеюсь, что вы можете помочь, я не знаю, что делать. Кстати пробовал через gson перевести List на Java в json, но выводится та же ошибка.. Помоги пожалуйста.. Моя форма:

const Form: React.FC<Props> = ({id, text}) => {
    function handleDelete(e: any) {
        e.preventDefault();
        axios.post('http://localhost:8080/api/deleteMessage', {
            id: id,
            text: text,
        })
            .then(function (response) {
            })
            .catch(function (error) {
                console.info(error);
            });
    }
    return (
        <div>
            <div className = {style.wrapper}>
                <div className = {style.coontainer}>
                    <div className = {style.form}>
                        <p>{text}</p>
                        <a onClick = {handleDelete} style = {{display: "inline", margin: "0 20px", color: "white", cursor: "pointer"}}>Удалить</a>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Form;