Correct way to have inputs show other data?

        {#if updates.data.measureTemplate.color}
            <label for="colorOverride">{localizeFull("PF1.CustomColor")}</label>
            <div class="form-fields">
                <input
                    id="colorOverride"
                    type="text"
                    bind:value={updates.data.measureTemplate.color}
                    name="measureTemplate.color"
                />
                <div class="color-input-border">
                    <input
                        style="opacity: {updates.data.flags[MODULE_NAME][CONSTS.flags.colorAlpha]}"
                        type="color"
                        bind:value={updates.data.measureTemplate.color}
                        data-edit="measureTemplate.color"
                    />
                </div>
            </div>
        {:else}
            <label for="colorOverride">{localizeFull("PF1.CustomColor")}</label>
            <div class="form-fields">
                <input id="colorOverride" type="text" value={currentUserColor} name="measureTemplate.color" />
                <div class="color-input-border">
                    <input
                        style="opacity: {updates.data.flags[MODULE_NAME][CONSTS.flags.colorAlpha]}"
                        type="color"
                        value={currentUserColor}
                        data-edit="measureTemplate.color"
                    />
                </div>
            </div>
        {/if}