Updating Dash virtual Dom

Hello,

I am trying to update the virtual Dom in Dash, to keep it in sync.

I have a clientside callback

    clientside_callback(
        """
        (msg, id) => {
            if (!msg) return dash_clientside.no_update;
            console.log(msg);
            addToSharedQueue({
                type: msg.type,
                content: msg.response,
                role: msg.role,
                date: msg.date,
                message_id: msg.message_id
            }, id);
            return getChildrenArray(id);
        }
        """,
        Output(ids.chat_messages(MATCH), "children", allow_duplicate=True),
        Input("server_socket", f"data-{current_app.config['SERVER_RESPONSE_STREAM']}"),
        State(ids.chat_messages(MATCH), "id"),
        prevent_initial_call=True,
    )

The addToSharedQueue will append a message to the chat_messages via javascript.

The issue is now, when I want to clear the container, it wont work. I narrowed it down, that the DOM and virtual DOM are likely out of sync at that this is the issue.

I tried to just return all the children, which I get via JavaScript, in the dash callback. But that throws an error:, I assume its the structure of the children.

dash_mantine_components.v0_14_5m1728409164.js:2 Error: undefined was not found.
    at Object.resolve (dash_renderer.v2_18_1m1728409147.min.js:2:70333)
    at r.value (dash_renderer.v2_18_1m1728409147.min.js:2:220348)
    at r.value (dash_renderer.v2_18_1m1728409147.min.js:2:222603)
    at Af (react-dom@18.v2_18_1m1728409147.2.0.min.js:133:101)
    at si (react-dom@18.v2_18_1m1728409147.2.0.min.js:132:399)
    at Rk (react-dom@18.v2_18_1m1728409147.2.0.min.js:252:71)
    at Si (react-dom@18.v2_18_1m1728409147.2.0.min.js:195:185)
    at Pk (react-dom@18.v2_18_1m1728409147.2.0.min.js:195:116)
    at Nd (react-dom@18.v2_18_1m1728409147.2.0.min.js:194:492)
    at Qf (react-dom@18.v2_18_1m1728409147.2.0.min.js:187:439)

What would be the best way to fix this? Thank you