Why is my custom component link redirecting with incorrect variant id?

Hi everyone,

I have a basic theme app extension and block component. What i m after is that redirect user to my website when clicked my custom component link with variant id.

I added a block setting type of product and selected dynamic resource in dashboard.

[ 
 
 ](https://example.com/variant_id=?{{ block.settings.product.selected_or_first_available_variant.id }})
{% schema %}
  {
    "name": "YourFit Product Extension",
    "target": "section",
    "stylesheet": "image-gallery.css",
    "javascript": "index.js",
    "templates": ["product"],
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "YourFit Product Extension"
      },
       {
      "id": "link",
      "type": "url",
      "label": "Link URL"
       },
        {
      "id": "linktext",
      "type": "text",
      "label": "Link text",
      "default": "Click here"
      },
      {
        "type": "text",
        "id": "description",
        "label": "Description",
        "default": "A simple app block that shows a grid of images that can be customized by the merchant. Each image can be selected to show a popup with the full-sized image."
      },
      {
        "type": "image_picker",
        "id": "image_1",
        "label": "Image 1"
      },
      {
        "type": "image_picker",
        "id": "image_2",
        "label": "Image 2"
      },
      {
        "type": "image_picker",
        "id": "image_3",
        "label": "Image 3"
      },
      {
        "type": "image_picker",
        "id": "image_4",
        "label": "Image 4"
      },
      {
      "id": "product",
      "type": "product",
      "label": "Product",
      "autofill": true
      }
    ]
  }
{% endschema %}

So when i click to component it redirect with wrong variant id. Actual variant id is different in shopify link =>
https://yourfit-by-3dlook.myshopify.com/products/fitnes-short?variant=42016263733433

Can you please help !