Dawn Theme currentVariant variable incorrect

[JLlivpur]

I am using a custom version of the Dawn theme. I am trying to show/hide a subscription purchase option based on which variant is selected. The code I have currently is working fine:

class VariantSelects extends HTMLElement {
    constructor() {
      super();
      this.addEventListener('change', this.onVariantChange);
    }
  
    onVariantChange() {
      this.updateOptions();
      this.updateMasterId();
      this.toggleAddButton(true, '', false);
      this.updatePickupAvailability();
      this.removeErrorMessage();
      this.updateVariantStatuses();
      this.noSubOption();
  
      if (!this.currentVariant) {
        this.toggleAddButton(true, '', true);
        this.setUnavailable();
      } else {
        this.updateMedia();
        this.updateURL();
        this.updateVariantInput();
        this.renderProductInfo();
        this.updateShareUrl();
      }
    }

   noSubOption() {
        let noSub = 'Watermelon'
        let subForm = document.getElementById("subSave")
        let sellPlans = document.getElementById("sellingPlans")
        let lto = document.getElementById("ltoDiv")

        if (this.currentVariant.option1 == noSub ) {
          subForm.style.visibility = 'hidden';
          sellPlans.style.display = 'none';
          lto.style.display = 'block'
        } else {
          subForm.style.visibility = 'visible'
          sellPlans.style.display = 'block'
          lto.style.display = 'none'
        }
    }
}

However, when you first navigate to the page in question, the `currentVariant` variable is being filled with data from a completely different product page. I assume this is because it is technically pulling in the first available variant on the site as a whole. 

My question is, how do I force the currentVariant variable to populate the first available variant on a specific page, and not from the site overall?