A way to add key-pair to an existing store

[livid path]

I am trying to create a web application in which the users can drag buttons all over the place and maybe add buttons if they want. I am facing a problem which is:

How can I add to the store a key-value pair. My store looks like this:

const buttons = useStore(buttonsRouteLoader().value?.buttons || {}, {deep:true})

the store will look like this if there is data loaded into it:

{
 "12" : {...},
 "33": {...}
}

I want to add lets say a new button id with its value into the store. How can I do that?

At the moment, the solution is to hard-refresh the page after adding a button. This will destroy the old store and create a new one. And re-render every component from scratch. I am trying to avoid that as much as I can.

Thank you for your help. Appreciated!

[livid path]

Solved it by wrapping the inner key-value pair by a parent key-value pair. However, I am running into a problem with updating the page.

The new store shape

{ 
 buttons:{
 "12" : {...},
...
 }
}

The store seems to be changed successfully, and useVisibleTask shows that it updates. However, the rendering does not update the buttons, or loads a new button, but its id is the same as the old button (so I have two buttons with the same id).

The way I render the button:

Object.entries(store.buttons).map(...);

[manic umbra]

can i see how you’re adding buttons to the object and more html on how you’re rendering it?

[livid path]

I am not adding buttons to the object. My code looks like this regarding rendering.

component$(()=>{

return (
Object.entries(store.buttons).map((kv)=>{
 return (
<MyButton/>
}
)
});

I am passing the id ofcourse to my button. I will provide the code once I switch on the laptop again