Javascript radio button price change giving garbage answer

I’ve been busy working on a Shopify website page alongside a co-worker, who has tried to add radio buttons to change the output price on a purchasing page, however instead of adding to the base price, it just gives a garbage value as an output (the garbage value being & pound;0.00, when it should be adding £2 to the base price), I’ve looked at the script and I’m a bit stumped, the only indicated from Shopify being that newPrice in t: price: newPrice on line 17 is an unknown object.

Any pointers to a fix or better solution would be greatly appreciated.

<script>     
    var radioButtons = document.querySelectorAll('input[type="radio"]');
    var priceDisplay = document.querySelector('.product-price'); // Replace with your price element selector
    var basePrice = {{ product.price | money_without_currency }}; // Get the base price from Liquid

    radioButtons.forEach(function(button) {
      button.addEventListener('change', function() {
        var selectedValue = this.value;
        var newPrice = basePrice;

         if (selectedValue === 'without core drops') {
          newproductprice = +0;  //Increase price by £0 for without core drops
        } else if (selectedValue === 'with core drops') {
          newproductprice = +2;  //Increase price by £2 for with core drops
        } 

        priceDisplay.textContent = "{{ 'products.general.from' | t: price: newPrice | money }}";
      });
    });
</script>