React-Form-Hook doesnt prevent submission for inValid field

im trying to submit form with 3 fields, trying to validate those fields, if not valid, form shouldn’nt be submitted.(obviously)

other 2 fields working properly, when in try to add price field, if its invalid(crossing max limit) it gives error message and field turns red as i coded using “errors.fieldname”, which means react-form-hook validating the field. but when i submit the form, befor submission, that validation error dissappeares and form submits
note: problem is just with max validation.

im using custom-input element/child component to formate price value as currecy.

tried controller, not helping.
tried different modes, not helping.
also not getting similar bug on google.

here is the code, related to the bug:

const AddEditPhotography: React.FC<IAddEditPhotographyProps = ({isEditPhotography,showScreen,handlePhotographyClose, handleAddPhotography, currentPhotographyData, cityDropDownList }) = {

const maxPrice = 9999999999999999.99

const { register, handleSubmit, reset, setValue, formState: { errors, isValid } } = useForm<IPhotography>({mode: "onChange"});

    useEffect(() => {
      reset(currentPhotographyData)
    }, [isEditPhotography, setValue, showScreen, currentPhotographyData]);
    
    const beginSubmit = async (data: any) => {
      console.log(errors.price)          // undefined
      data.price = removeNumberFormatting(data.price.toString());
      handleAddPhotography(data);
    }
    return (
              <form onSubmit={handleSubmit(beginSubmit)}>           
                <TextField
                  id="name"
                  label="Photography Name"
                  error={!!errors.name}
                  helperText={getError("name")}
                  {...register("name", {
                    required: true,
                    maxLength: maxNameLength,
                    minLength: minNameLength,
                  })}
                />
                <TextField
                  id="description"
                  label="Description"
                  error={!!errors.description}
                  helperText={getError("description")}
                  {...register("description", {
                    required: true,
                    minLength: minDescriptionLength,
                    maxLength: maxDescriptionLength 
                  })}
                />
                <TextField
                  id="price"
                  label="Price"
                  error={!!errors.price}
                  helperText={getError("price")}
                  {...register("price", {
                    required: true,
                    max: maxPrice,
                  })}
                  InputProps={{
                    inputComponent: NumericFormControl as any,
                  }}
                  value={isEditPhotography
                    ? currentPhotographyData?.price || "" : undefined
                  }
                />
                <Button variant="contained"  className="btn-save" type="submit">
                  Save
                </Button>
                <Button onClick={onModalClose}>
                  Cancel
                </Button>
              </form>
    );

};
 

here is the child component/NumericFormControl:

interface CustomProps extends NumericFormatProps {
  onChange: (event: { target: { name: string; value: string } }) => void;
  name: string;
}
const prefix = "₹"
  
export const removeNumberFormatting = (value: string): Number => {
  const prefixRegex = new RegExp(prefix, "g");
  value = value.replace(prefixRegex, "").replace(/,/g, "");
  return parseFloat(value);
}

const NumericFormControl = React.forwardRef<NumericFormatProps, CustomProps>(
  function NumericFormatCustom(props, ref) {
    const { onChange, ...other } = props;

    return (
      <NumericFormat
        {...other}
        getInputRef={ref}
        allowNegative={false}
        onValueChange={(values) => {
          onChange({
            target: {
              name: props.name,
              value: values.floatValue?.toString() || "",
            },
          });
        }}
        thousandSeparator
        valueIsNumericString
        prefix={prefix}
      />
    );
  },
);

this is my first question on stack-over-flow, sorry for big chunck of code, i tried my best to remove unnecessary things.

im getting same bug on different scenario, can someone also tell that in which cases/scenarios this happens?