How to use the @hig/utils.generateId function in @hig/utils

checked: false,
    disabled: false,
    indeterminate: false,
    name: "checkbox",
    value: "value"
  };

  setIndeterminate = input => {
    if (input) {
      // Workaround for https://github.com/facebook/react/issues/1798
      // eslint-disable-next-line no-param-reassign
      input.indeterminate = this.props.indeterminate;
    }
  };

  id = generateId("checkbox");

  render() {
    const {
      checked,
      disabled,
      indeterminate,
      label,
      name,
      onBlur,
      onChange,
      onClick,
      onFocus,
      required,
      value
    } = this.props;

stylesheet: PropTypes.func,
    /**
     * Title of the modal
     */
    title: PropTypes.string,
    /**
     * Style of the modal shell
     */
    type: PropTypes.string
  };

  static defaultProps = {
    type: types.STANDARD
  };

  titleId = generateId("modal-title");

  render() {
    const {
      children,
      closeButtonAriaLabel,
      headerChildren,
      onCloseClick,
      onOverlayClick,
      onWindowClick,
      open,
      stylesheet: customizeStyles,
      title,
      type,
      ...otherProps
    } = this.props;
    const { className } = otherProps;

function createNotification() {
  return {
    id: generateId("notification"),
    type: "primary",
    content: (
      <div>
        <p>
          You have 4 new seats of <b>Product Design Collection</b> subscription,
          switched from <b>Building Design Suite Premium</b> subscription.
        </p>
        <p>
          Learn how to switch
           
          
            or
          
           
          Assign users
        </p></div>

/**
     * Value of the field
     */
    value: PropTypes.string
  };

  static defaultProps = {
    clearButtonTitle: "Clear field",
    type: "text"
  };

  state = {
    focused: false
  };

  id = generateId("text-field");

  handleFocus = event => {
    this.setState({ focused: true });
    if (this.props.onFocus) this.props.onFocus(event);
  };

  handleBlur = event => {
    this.setState({ focused: false });
    if (this.props.onBlur) this.props.onBlur(event);
  };

  hasClearableInput() {
    return (
      this.props.showClearButton &&
      this.props.value &&
      this.props.value.length > 0

* Corresponds to the type attribute of an <input>. Relevant for designating a password field, for example.
     */
    type: PropTypes.string,
    /**
     * Initial value of the field
     */
    value: PropTypes.string
  };

  static defaultProps = {
    label: "Comments",
    placeholder: "Enter your comments here.",
    required: "This field is required."
  };

  id = generateId("text-area");

  hasValue() {
    if (this.props.defaultValue || this.props.value) {
      return true;
    }
    return false;
  }

  render() {
    const {
      defaultValue,
      disabled,
      instructions,
      label,
      maxLength,
      minLength,