const handleMobileNumberValidation = (phone: string) => {
    // const mobileNumberRegex = /^[+0-9\s]*$/;
    // const mobileNumberRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
    const mobileNumberRegex = /^(?:[0-9] ?){6,14}[0-9]$/;
    return mobileNumberRegex.test(phone);
  };


    if (primaryMobileNumber.trim() !== '') {
      if (!handleMobileNumberValidation(primaryMobileNumber)) {
        errors.primaryMobileNumber = 'Invalid mobile number';
      }
    }


    <div className="col-md-6">
              <label htmlFor="mobile" className="form-label w-100 mobile-label">
                Primary Mobile Number*
              </label>
              <div className="d-flex">
                {/* autocomlete field for isdcodelist */}
                <Autocomplete
                  disablePortal
                  id="isdcodelist"
                  options={isdCodesList}
                  isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      {...register('isdCode', {
                        required: true,
                      })}
                      className="isd-code-input"
                      placeholder="+971"
                    />
                  )}
                  renderOption={(props, option) => (
                    <span
                      className="phone-number-option"
                      {...props}
                    >
                      {option.countryName}
                    </span>
                  )}
                            // onchange event handler to set the isdCode state
                  onChange={(e, value: any) => setIsdCode(
                    value?.label,
                  )}
                />
                <input
                  type="text"
                  className="form-control mobile-input"
                  id="mobile"
                  placeholder="XXX XXX XXXX"
                // onchange
                  onChange={(e) => setPrimaryMobileNumber(e.target.value)}
                  {...register('primaryMobileNumber', {
                    required: true,
                  })}
                />
              </div>
              {/* handle errors */}
              {formErrors.primaryMobileNumber && (
              <span className="error-message">{formErrors.primaryMobileNumber}</span>
              )}
            </div>