DebounceInput not allowed in rx.form.control()

[pglevy]

Describe the bug
When using both value and on_change for a form field with a label and a text input, it results in the error message: TypeError: Only Radix TextFieldRoot is allowed as child of FormControl. But it seems this should be allowed.

To Reproduce
Steps to reproduce the behavior:
See details in the discussion below.

Expected behavior
A form field with a label and text input should be able to have a value set and an on_change event handler.

Screenshots
n/a

Specifics (please complete the following information):

• Python Version: python-3.10
• Reflex Version: 0.5.5
• OS: replit
• Browser (Optional):

Additional context

Discussed in https://github.com/orgs/reflex-dev/discussions/3629

^{Originally posted by pglevy July 7, 2024}
Hi there,

I'm just starting to play around with Reflex and was going through the Chat App tutorial, but I'm having trouble with the form field behavior when trying to use a label.

Here's a reference on codepen of what I'm trying to achieve: a text input with a programmatically associated label (so the input receives focus when you click the label) that you can interact with by typing into it.

I started with this basic example, which seems to work, but when I start using state, I run into two problems:

1. When I try to use the value parameter on the input to reference the state variable, it loses the connection to the label. (Looks like the id doesn't get rendered on the input.) Also, I can't change the value of the input by typing into it.
2. When I try to use on_change to listen for changes and update the variable, compiling fails with the error: TypeError: Only Radix TextFieldRoot is allowed as child of FormControl.

It seems like I'm not grasping something about state and how it works, so I appreciate any help pointing me in the right direction.

I have this here on a repl and the code pasted below.

import reflex as rx

# from rxconfig import config

class State(rx.State):
    """The app state."""
    message: str = "Default"

def index() -> rx.Component:
    return rx.container(
        rx.form.root(
            rx.form.field(
                rx.form.label("Message"),
                rx.form.control(
                    rx.input(
                        name="message",
                        type="text",
                        value=State.message,
                        on_change=State.set_message,
                    ),
                    as_child=True,
                ),
                rx.form.message("There was a problem"),
                name="Message"
            ),
            rx.form.submit(
                rx.button("Send message"),
                as_child=True,
            ),
        ),
        rx.text(f"Your message: ", State.message)
    )

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