How to use the @workday/canvas-kit-react-common.ErrorType.Error function in @workday/canvas-kit-react-common

({error}) => {
    let errorRingColor;
    let errorRingBorderColor = 'transparent';

    if (error === ErrorType.Error) {
      errorRingColor = inputColors.error.border;
    } else if (error === ErrorType.Alert) {
      errorRingColor = inputColors.warning.border;
      errorRingBorderColor = colors.cantaloupe600;
    } else {
      return;
    }

    const styles = {
      '& ~ div:first-of-type': {
        boxShadow: `
          0 0 0 2px ${colors.frenchVanilla100},
          0 0 0 4px ${errorRingColor},
          0 0 0 5px ${errorRingBorderColor}`,
      },
      '&:focus ~ div:first-of-type': {

({error}) => {
    let errorBorderColor;
    let errorRingColor;

    if (error === ErrorType.Error) {
      errorRingColor = inputColors.error.border;
    } else if (error === ErrorType.Alert) {
      errorRingColor = inputColors.warning.border;
      errorBorderColor = colors.cantaloupe600;
    } else {
      return {};
    }
    return {
      borderRadius: borderRadius.m,
      transition: '100ms box-shadow',
      boxShadow: errorBorderColor
        ? `inset 0 0 0 1px ${errorBorderColor}, inset 0 0 0 3px ${errorRingColor}`
        : `inset 0 0 0 2px ${errorRingColor}`,
      padding: `${spacing.xxxs} ${spacing.xs}`,
      margin: `-${spacing.xxxs} -${spacing.xs}`,
    };

React.InputHTMLAttributes = {
        ...child.props,
      };

      if (this.props.grow) {
        props.grow = this.props.grow;
      }

      if (typeof this.props.error !== 'undefined') {
        props.error = this.props.error;

        if (this.props.hintId) {
          props['aria-describedby'] = this.props.hintId;
        }

        if (this.props.error === ErrorType.Error) {
          props['aria-invalid'] = true;
        }
      }

      props.id = this.inputId;

      return React.cloneElement(child, props);
    }

    return child;
  };

({error}) => {
    let errorRingColor;
    let errorRingBorderColor = 'transparent';

    if (error === ErrorType.Error) {
      errorRingColor = inputColors.error.border;
    } else if (error === ErrorType.Alert) {
      errorRingColor = inputColors.warning.border;
      errorRingBorderColor = colors.cantaloupe600;
    } else {
      return;
    }

    const errorStyles = {
      '& ~ div:first-of-type': {
        border: `1px solid ${errorRingColor}`,
        boxShadow: `0 0 0 1px ${errorRingColor}, 0 0 0 2px ${errorRingBorderColor}`,
      },
      '&:not(:checked):not(:disabled):not(:focus):hover ~ div:first-of-type': {
        borderColor: errorRingColor,
      },

({error, variant}) => ({
    backgroundColor: error === ErrorType.Error ? colors.cinnamon500 : colors.cantaloupe400,
    color: error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400,
    borderRadius:
      variant === BannerVariant.Sticky ? `${borderRadius.m} 0 0 ${borderRadius.m}` : borderRadius.m,
    width: variant === BannerVariant.Sticky ? '222px' : '328px',
    '&:hover': {
      backgroundColor: error === ErrorType.Error ? colors.cinnamon600 : colors.cantaloupe500,
    },
  })
);

({error, variant}) => ({
    backgroundColor: error === ErrorType.Error ? colors.cinnamon500 : colors.cantaloupe400,
    color: error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400,
    borderRadius:
      variant === BannerVariant.Sticky ? `${borderRadius.m} 0 0 ${borderRadius.m}` : borderRadius.m,
    width: variant === BannerVariant.Sticky ? '222px' : '328px',
    '&:hover': {
      backgroundColor: error === ErrorType.Error ? colors.cinnamon600 : colors.cantaloupe500,
    },
  })
);