<vaadin-select> with renderer cannot be bound to integer or boolean

[cromoteca]

Description

While adding an example to the Hilla documentation (vaadin/docs#1497), I realized that the code I was writing only works when bound to strings, not to booleans or integers.

The select basically works, but it can't show the initial value, neither it can when the value changes externally (it becomes blank).

Expected outcome

Should work like when bound to strings:

          <vaadin-select ${field(model.myStringField)} ${selectRenderer(()=> html`
            <vaadin-list-box>
              <vaadin-item value="A">Value is A</vaadin-item>
              <vaadin-item value="B">Value is B</vaadin-item>
              <vaadin-item value="C">Value is C</vaadin-item>
            </vaadin-list-box>
            `)}>
          </vaadin-select>

Minimal reproducible example

          <vaadin-select ${field(model.myIntField)} ${selectRenderer(()=> html`
            <vaadin-list-box>
              <vaadin-item value="1">Value is 1</vaadin-item>
              <vaadin-item value="2">Value is 2</vaadin-item>
              <vaadin-item value="3">Value is 3</vaadin-item>
            </vaadin-list-box>
            `)}>
          </vaadin-select>

Steps to reproduce

1. See https://github.com/cromoteca/kitchen-sink/tree/83862608b48bc536a8f518a54a0b30fa815fe5fa
2. Run the project
3. Try changing the valus in selects and in the other components bound to the same values

Environment

Vaadin version(s): 23.1.0 (Hilla 1.1.0)
OS: Linux

Browsers

Chrome