Issue

When using useClientDocument to update the state, syncing works when duplicating the tab but syncing stop working when manually creating a tab

https://github.com/user-attachments/assets/834ff088-7822-441d-b6bf-7702da947392

Reproduce guide ( base on web-todomvc)

Just replacing the implementation of updateNewTodoText

// src/components/Header.tsx

import { useStore } from '@livestore/react'
import React from 'react'
// import { uiState$ } from '../livestore/queries.js'
import { events, tables } from '../livestore/schema.js'

export const Header: React.FC = () => {
  const { store } = useStore()
  // const { newTodoText } = store.useQuery(uiState$)

  const [{ newTodoText }, updateUiState] = store.useClientDocument(
    tables.uiState,
  );

  // const updatedNewTodoText = (text: string) => store.commit(events.uiStateSet({ newTodoText: text }))

  const updatedNewTodoText = (text: string) => updateUiState({ newTodoText: text })

  const todoCreated = () =>
    store.commit(
      events.todoCreated({ id: crypto.randomUUID(), text: newTodoText }),
      events.uiStateSet({ newTodoText: '' }),
    )

  return (
    <header className="header">
      <h1>TodoMVC</h1>
      <input
        className="new-todo"
        placeholder="What needs to be done?"
        autoFocus={true}
        value={newTodoText}
        onChange={(e) => updatedNewTodoText(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            todoCreated()
          }
        }}
      ></input>
    </header>
  )
}