Intercepting autofill value before insertion to input field

I am currently creating a phone number input field, using react, with an input mask that includes a hardcoded country code at the beginning. So the field with an empty value would be +1 ( ) - and the field populated with a phone number would be +1 (222) 333-4444. My problem comes when I attempt to autofill a value, in firefox and chrome, autofill works fine because they both append a '+1' country code to the beginning of the stored autofill value. However, in safari this is not true. So a number could be stored as (222) 333-4444 which results in the safari autofilled value being +1 (334) 444-. And if the phone number is stored as +1 (222) 333-4444 then autofill will work correctly and the resulting input will be +1 (222) 333-4444. Is there a way to intercept this value before it is inserted into the input field so that I can edit it before it is mangled by the mask?

For the mask + input field I am using react-input-mask

My jsx for phone number input:

return (
  <div>
      <InputMask
        alwaysShowMask
        type="text"
        mask="+1 (999) 999-9999"
        maskChar=""
        beforeMaskedValueChange={beforeMaskedValueChange}
        onBlur={onBlur}
        className={className}
        onChange={onChange}
        value={phoneNumber}
        disabled={disabled}
      />
      {displayError && <p className={errorClassNameDefault}>{invalidDesc}</p>}
    </div>
  )