calling click function of another element from a button in typescript

Question

I can call click function of an element with plain javascript but the same code doesn't work with react / typescript when I try to add an onclick function to a separate button.

here's the plain javascript code that works :

var elements = document.getElementsByClassName("shopify-buy__btn");
for (i = 0; i < elements.length; i++) {
    elements[i].click(); // Run the "click" function by simulating a click.  
}

You can see what im trying to do from this demo website:

https://fantastic-choice-042131.framer.app/

I have a shopify button that is embedded into my website and I want to call the shopify button click function from a seperate button:

<div id='product-component-1686447263064'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'bearethfruit.myshopify.com',
      storefrontAccessToken: '9001a2ad8678abf2875eefcd3cd43bb7',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '6948929896621',
        node: document.getElementById('product-component-1686447263064'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "font-family": "Open Sans, sans-serif",
        ":hover": {
          "background-color": "#355820"
        },
        "background-color": "#1f3413",
        ":focus": {
          "background-color": "#355820"
        },
        "border-radius": "40px",
        "padding-left": "38px",
        "padding-right": "38px"
      }
    },
    "contents": {
      "img": false,
      "title": false,
      "price": false
    },
    "text": {
      "button": "Add to cart"
    },
    "googleFonts": [
      "Open Sans"
    ]
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-family": "Open Sans, sans-serif",
        ":hover": {
          "background-color": "#355820"
        },
        "background-color": "#1f3413",
        ":focus": {
          "background-color": "#355820"
        },
        "border-radius": "40px",
        "padding-left": "38px",
        "padding-right": "38px"
      }
    },
    "googleFonts": [
      "Open Sans"
    ],
    "text": {
      "button": "Add to cart"
    }
  },
  "option": {},
  "cart": {
    "styles": {
      "button": {
        "font-family": "Open Sans, sans-serif",
        ":hover": {
          "background-color": "#355820"
        },
        "background-color": "#1f3413",
        ":focus": {
          "background-color": "#355820"
        },
        "border-radius": "40px"
      }
    },
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    },
    "googleFonts": [
      "Open Sans"
    ]
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-family": "Open Sans, sans-serif",
        "background-color": "#1f3413",
        ":hover": {
          "background-color": "#355820"
        },
        ":focus": {
          "background-color": "#355820"
        }
      }
    },
    "googleFonts": [
      "Open Sans"
    ]
  }
},
      });
    });
  }
})();
/*]]>*/
</script>

The following is my react / typescript code for a button to call the click function of another element within Framer.

I know that the onClick function is called because I test it with console.log's and alerts. I just don't know why a button element can't get called from this onClick function.

I'm thinking that my code doesn't work because im trying to get an element from the embedded code and script of shopify.

Here's my typescript code:

export function withShopifyBuy(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                onClick={() => {
                    //typescript for document.getElementsByClassName("shopify-buy__btn")[0].click();
                    let element: HTMLButtonElement =
                        document.getElementsByClassName(
                            "shopify-buy__btn"
                        )[0] as HTMLButtonElement

                    element.click() //calling click function
                }}
            />
        )
    }
}