Improve ClientState compatibility with rx.input

[masenf]

Tweaks to make the ClientState work better with text input fields

import reflex as rx


class AppState(rx.State):
    items: list[str]

    def add_item(
        self,
        value: str,
    ):
        self.items.append(value)


def todo_list():
    ItemState = rx._x.client_state(default="")

    return rx.vstack(
        rx.unordered_list(
            rx.foreach(
                AppState.items,
                lambda item: rx.list_item(rx.text(item)),
            ),
        ),
        rx.hstack(
            ItemState,
            rx.input(
                placeholder="what to do",
                id="input",
                value=ItemState.value,
                on_change=ItemState.set_value,
            ),
            rx.button(
                "Add",
                on_click=AppState.add_item(ItemState.value),
            ),
        )
    )


def index() -> rx.Component:
    # Welcome Page (Index)
    return rx.container(
        rx.color_mode.button(position="top-right"),
        todo_list(),
        rx.logo(),
    )


app = rx.App()
app.add_page(index)