React-hook-form and PatternFormat from react-number-format

[sian022]

    <Controller
        control={control}
        name="mobileNumber"
        render={({ field: { onChange, onBlur, value, ref } }) => {
          const formattedValue = value?.replace(/-/g, "");
          let format = "";

          if (formattedValue?.length <= 3) {
            format = "####";
          } else if (formattedValue?.length <= 6) {
            format = "###-####";
          } else if (formattedValue?.length <= 10) {
            format = "###-###-####";
          }

          return (
            <PatternFormat
              format={format}
              label="Phone Number"
              type="tel"
              size="small"
              customInput={TextField}
              autoComplete="off"
              getInputRef={ref}
              onValueChange={(e) => {
                onChange(e.value);
              }}
              onBlur={onBlur}
              value={value || ""}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">+63</InputAdornment>
                ),
              }}
              helperText={errors?.mobileNumber?.message}
              error={!!errors?.mobileNumber}
            />
          );
        }}
      />

So what happens is whenever I reset the form, it triggers the required validation for this mobileNumber field. If I try to open the form again, the errors persist. However, if I remove the hyphens from the format, that error doesn't trigger and it's fine. I'm so lost.