posts.map is not a function React Spring Boot WebSocket – Reactjs

in general, I have a problem. I want to send a message to an endpoint, in which to send all messages from the database to the web socket topic so that the client can receive them all. Here is my method for sending a message (I use MONGODB):

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

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

In general, nothing out of the ordinary, There are no problems with this, everything goes to the topic, everything is cool. Now all this needs to be caught on the client, for this I wrote the following code:

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.log(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.log(`Connected: ${frame}`)


              stompClient.subscribe("/topic/greetings", function (greeting: any) {
                  console.log(greeting.body)
                  const tempParsedJson = JSON.stringify(greeting.body)
                  console.log(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;

In short, we successfully subscribe to the topic, everything is fine again, but until I need to get the objects. In the console I see this:

The first is what I get from Java, the second is what I’m trying to translate into JSON. After sending messages, according to my code, we see that I am trying to display this data separately in each element, but when I try I get an error:

ERROR
posts.map is not a function

I hope you can help, I don’t know what to do. By the way, I tried to translate List in Java through gson to json, but the same error is displayed ..
Help please..
My Form:

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.log(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;