Add onChange handler to input in svelte

Im trying to add the asYouType function from libphonenumber-js to my svelte input using an onChange handler as I'm not sure how this can be done with 2 way binding.

I have managed to implement this but it will only format the number onBlur instead of as the user types into the input as is expeccted behaviour as seen here libphonenumber-js

How can I change my input so that it will format as the user types into it?

<script>
  import { AsYouType } from "libphonenumber-js";

  export let value = "";
  export let label = "";

  let isFocused = false;
  let isTooltipVisible = false;

  const onBlur = () => {
    isFocused = false;
    isTooltipVisible = false;
  };

  const handleChange = val => {
    if (localeKey === "dfc.removal_form.phone") {
      const asYouType = new AsYouType("US");
      value = new AsYouType("US").input(val);
    }
  };
</script>

<div class="input-container input__row {isFullWidth ? 'isFullWidth' : ''}">

  <label>{label}</label>

  <input
    id={label}
    {name}
    bind:value
    on:change={e => handleChange(e.target.value)}
    on:focus={() => {
      isFocused = true;
      isTooltipVisible = true;
    }}
    on:blur={onBlur}
    on:input={() => {
      isTooltipVisible = false;
    }}
    data-ipr-selector={dataIprSelector} />
</div>