### Apache Airflow version

2.6.1

### What happened

When playing around with the form features as interoduced in AIP-50 and using the select list option via `enum` I realized that the default value will not be correctly picked when the form is loaded. Instead the first value always will be pre-selected.

### What you think should happen instead

Default value should be respected

### How to reproduce

Modify the `airflow/example_dags/example_params_ui_tutorial.py:68` and change the default to some other value. Load the form and see that `value 1` is still displayed on form load.

### Operating System

Ubuntu 20.04

### Versions of Apache Airflow Providers

not relevant

### Deployment

Official Apache Airflow Helm Chart

### Deployment details

not relevant

### Anything else

Workaround: Make your default currently top of the list.

### Are you willing to submit PR?

- [X] Yes I am willing to submit a PR!

### Code of Conduct

- [X] I agree to follow this project's [Code of Conduct](https://github.com/apache/airflow/blob/main/CODE_OF_CONDUCT.md)

It is templated with the following parameter to render proper HTML form fields:
            <ul>
                <li><code>{name}</code>: Name of the HTML input field that is expected.</li>
                <li><code>{value}</code>:
                    (Default) value that should be displayed when showing/loading the form.</li>
                <li>Note: If you have elements changing a value, call <code>updateJSONconf()</code> to update
                    the form data to be posted as <code>dag_run.conf</code>.</li>
            </ul>
            Example: <code>&lt;input name='{name}' value='{value}' onchange='updateJSONconf()' /&gt;</code>
            """,
            custom_html_form="""
            <table width="100%" cellspacing="5"><tbody><tr><td>
                <label for="r_{name}">Red:</label>
            </td><td width="80%">
                <input id="r_{name}" type="range" min="0" max="255" value="0" onchange="u_{name}()"/>
            </td><td rowspan="3" style="padding-left: 10px;">
                <div id="preview_{name}"
                style="line-height: 40px; margin-bottom: 7px; width: 100%; background-color: {value};"
                >&nbsp;</div>
                <input class="form-control" type="text" maxlength="7" id="{name}" name="{name}"
                value="{value}" onchange="v_{name}()" />
            </td></tr><tr><td>
                <label for="g_{name}">Green:</label>
            </td><td>
                <input id="g_{name}" type="range" min="0" max="255" value="0" onchange="u_{name}()"/>
            </td></tr><tr><td>
                <label for="b_{name}">Blue:</label>
            </td><td>
                <input id="b_{name}" type="range" min="0" max="255" value="0" onchange="u_{name}()"/>
            </td></tr></tbody></table>