Radio Buttons for Variant Pickers

[useloos]

Hey! I've been working on my Dawn theme 12.0.0 and I'm having trouble trying to work around with my radio buttons.
I currently have different color pickers for different colors on my products, which are being displayed on the home page of the store, however when I click on one color, let's say off-white, it opens the page of the product variant and I wanted it to just update the current image of the displayed product to match the color picked.
Any thoughts on how I can follow up with this?

{%- if block.settings.picker_type == 'button' -%}
    <variant-radios
      id="variant-radios-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url === false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        <fieldset class="js product-form__input">
          <legend class="form__label">{{ option.name }}</legend>
          {% render 'product-variant-options', product: product, option: option, block: block %}
        </fieldset>
      {%- endfor -%}
      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-radios>

The code above is what I've been working on the radio buttons. Even though I have a verification for updating the URL, it does not work. Any thoughts or considerations to it are appreciated.

Thanks.