I'm trying to add multiple items to a list where each item is added after some delay, but when I use the setState it either seems to not change the state or it doesn't re-render the components, I would like to know why this happens.

import React, { useState } from 'react';
import './App.css';

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
};

function App() {
    const [messages, setMessages] = useState([]);

    const createMessages = async () => {
        for (let i = 0; i < 10; ++i) {
            console.log("test");
            setMessages([...messages, "test"]);
            await sleep(1000);
        }
    };

    return (
        <div id="App">
            <button onClick={createMessages}>Create Messages</button>
            <div>
                {messages.map((message, index) => <p key={index}>{message}</p>)}
            </div>
        </div>
    );
}

export default App;