Cookies not synced between server and browser

I am writing a chat bot using Elysia and HTMX. I have a put method written like this:

    .put('/message', ({ body, cookie: {cookie} }) => {
        cookie.httpOnly = true // do I need this?
        if (!cookie.value) {
            console.log("set cookies")
            cookie.value = {
                messages: ['Hello! Do you have any questions?']
            }
            console.log(cookie.value.messages)
        } else {
            console.log("cookies are set already")
            console.log(cookie.value.messages)
        }
        
        cookie.value.messages.push(body.message) 
        return <Chatbox messages={cookie.value.messages}/>
    }, 
    {
        body: t.Object({message: t.String()}) // define html body response type
    }
    )

I want the cookies to store an array of all the chats. When I run it my webserver will render the first "Hello" message and when I submit a new message it will render that. But the array never goes over a size of 2 and it will end up replacing the 2nd element of the array with the newest message I send. Pushing the body's message to the array will work once on the server then the cookies come in fresh (with only the "Hello" message). So the cookies value always looks like this in my browser {"messages":["Hey, welcome to my Website! Do you have any questions for me?"]} but on the server will sometimes contain the latest message. How can I keep on adding to this messages array?

Thanks!

I just added cookie.set({}) and it worked.