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

value={formattedValue}
          error={error}
          spellCheck={false}
          disabled={disabled}
          maxLength={7} // 7 to allow pasting with a hash
          {...elemProps}
        />
        
        {showCheck && this.isValidHex(formattedValue) ? (
          
        ) : null}
        #
      
    );
  }

render() {
    const {background, size, icon, ...elemProps} = this.props;

    const iconColor = pickForegroundColor(background, 'rgba(0,0,0,0.65)');
    const iconSize = size * 0.625;

    return (
      
        
      
    );
  }
}

iconCircles.forEach(i => {
    const circle = iconRoot.createElement('div');
    circle.setAttribute('class', 'wdc-icon-circle-container');

    const size = i.getAttribute('data-size') || 40;
    circle.style.height = `${size}px`;
    circle.style.width = `${size}px`;
    i.style.height = `${size * 0.625}px`;
    i.style.width = `${size * 0.625}px`;

    let circleBgColor = i.getAttribute('data-circle-background');
    circleBgColor = circleBgColor === 'true' ? 'soap300' : circleBgColor;
    circleBgColor = getColor(circleBgColor) || circleBgColor;
    circle.style.backgroundColor = circleBgColor;

    const iconColor = pickForegroundColor(circleBgColor, 'rgba(0,0,0,0.65)');
    i.setAttribute(colorableKeys.fill, iconColor);
    i.setAttribute(colorableKeys.accent, iconColor);

    circle.innerHTML = i.outerHTML;
    i.parentNode.replaceChild(circle, i);
  });
}