Pills & Dropdown Together In DAWN

Question

I'm trying to customize the product page in the Dawn Shopify theme to include both variant pills (radio buttons) and a dropdown menu. I've modified the code as follows:

{%- when 'variant_picker' -%}

{%- unless product.has_only_default_variant -%}

    <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>

      {%- for option in product.options_with_values -%}

          <!-- ... (unchanged) ... -->

      {%- endfor -%}

      <script type="application/json">

        {{ product.variants | json }}

      </script>

    </variant-radios>

    <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>

      {%- for option in product.options_with_values -%}

        <div class="product-form__input product-form__input--dropdown {% if forloop.first %}hidden{% endif %}">

          <!-- ... (unchanged) ... -->

        </div>

      {%- endfor -%}

      {%- for option in product.options_with_values -%}

          <fieldset class="js product-form__input hidden">

            <!-- ... (unchanged) ... -->

          </fieldset>

      {%- endfor -%}

      <script type="application/json">

        {{ product.variants | json }}

      </script>

    </variant-selects>

{%- endunless -%}

<noscript class="product-form__noscript-wrapper-{{ section.id }}">

  <!-- ... (unchanged) ... -->

</noscript>

However, I'm facing an issue with the color when selecting an option from the dropdown. The color variant changes to the default color. I suspect it's due to the interaction with the dropdown's selection of the first default color. How can I resolve this issue and make sure the color remains consistent when selecting an option from the dropdown?

Any help or guidance on this would be greatly appreciated! Thank you.

I modified it acording to my need but it cssnot work please help