How to use the @commercetools-uikit/utils.filterDataAttributes function in @commercetools-uikit/utils

: intl.formatMessage(messages.placeholder),
                  onMouseEnter: () => {
                    // we remove the highlight so that the user can use the
                    // arrow keys to move the cursor when hovering
                    if (isOpen) setDownshiftHighlightedIndex(null);
                  },
                  onKeyDown: event => {
                    if (event.key === 'Enter' && inputValue.trim() === '') {
                      clearSelection();
                    }
                  },
                  // we only do this for readOnly because the input
                  // doesn't ignore these events, unlike when its disabled
                  onFocus: props.isReadOnly ? undefined : openMenu,
                  onClick: props.isReadOnly ? undefined : openMenu,
                  ...filterDataAttributes(props),
                })}
                hasSelection={Boolean(selectedItem)}
                onClear={clearSelection}
                isOpen={isOpen}
                isDisabled={props.isDisabled}
                isReadOnly={props.isReadOnly}
                toggleButtonProps={getToggleButtonProps()}
                hasError={props.hasError}
                hasWarning={props.hasWarning}
              />
              {isOpen && !props.isDisabled && !props.isReadOnly && (

{({ css: makeClassName, cx }) => (
            <div style="{{">
              </div>

render() {
    return (
      <div>
        
        </div>

/>
          
          
        
      
    );
  }
}

name={props.name}
          autoComplete={props.autoComplete}
          value={props.value}
          onChange={props.onChange}
          onHeightChange={handleHeightChange}
          id={props.id}
          onBlur={props.onBlur}
          onFocus={handleFocus}
          isDisabled={props.isDisabled}
          hasError={props.hasError}
          hasWarning={props.hasWarning}
          placeholder={props.placeholder}
          isReadOnly={props.isReadOnly}
          isAutofocussed={props.isAutofocussed}
          isOpen={isOpen}
          {...filterDataAttributes(props)}
        />
        {shouldRenderToggleButton && (
          <div>
            </div>

const AsyncCreatableSelectInput = props => {
  const intl = useIntl();
  const theme = useTheme();

  const placeholder =
    props.placeholder || intl.formatMessage(messages.placeholder);

  return (
    
      <div>
        </div>

const AsyncSelectInput = props => {
  const theme = useTheme();
  const intl = useIntl();

  const placeholder =
    props.placeholder || intl.formatMessage(messages.placeholder);

  return (
    
      <div>
        </div>

const Inline = props => (
  <span>
    {props.children}
  </span>
);

htmlFor={this.state.id}
          />
          
            {this.props.children}
          
          
        
      
    );
  }
}

autoComplete={props.autoComplete}
        value={props.value}
        onChange={props.onChange}
        onFocus={props.onFocus}
        onBlur={handleBlur}
        isAutofocussed={props.isAutofocussed}
        isDisabled={props.isDisabled}
        hasError={props.hasError}
        isReadOnly={props.isReadOnly}
        onClear={onClear}
        placeholder={
          typeof props.placeholder === 'string'
            ? props.placeholder
            : intl.formatMessage(messages.placeholder)
        }
        {...filterDataAttributes(props)}
      />
    
  );
};