How to use the react-color.SketchPicker function in react-color

displayColorPicker = _state.displayColorPicker,
          activeColorFilters = _state.activeColorFilters,
          activeColorFilterIndex = _state.activeColorFilterIndex;

      var colorFilter = activeColorFilters[activeColorFilterIndex] || {};

      return _react2.default.createElement(
        _styledComponents.TabWrap,
        null,
        this.renderSidebar(),
        this.renderContent(),
        displayColorPicker && _react2.default.createElement(
          _styledComponents.SketchPickerWrapper,
          null,
          _react2.default.createElement(_styledComponents.SketchPickerOverlay, { onClick: this.handleClose }),
          _react2.default.createElement(_reactColor.SketchPicker, { color: colorFilter.value, onChange: this.handleChange }),
          _react2.default.createElement(
            _styledComponents.ApplyColorBtn,
            {
              sm: true,
              themeColor: true,
              onClick: this.handleClose,
              style: { zIndex: 5555, position: 'relative' }
            },
            _reactI18nify.I18n.t('upload.apply')
          )
        ),
        _react2.default.createElement(_Spinner.Spinner, { overlay: true, show: isLoading })
      );
    }
  }]);

ColorPicker.prototype.render = function () {
        var _this = this;
        var _a = this.props, size = _a.size, color = _a.color;
        return (React.createElement(Container, { id: this.props.id, css: this.props.css, className: this.props.className, innerRef: function (containerEl) {
                _this.containerEl = containerEl;
            }, onClick: function () { return _this.togglePicker(); } },
            React.createElement(Button_1.default, { color: color }, color),
            this.state.isPickerOpen && (React.createElement(PickerContainer, { onClick: function (e) { return e.stopPropagation(); } },
                React.createElement(react_color_1.SketchPicker, { color: this.props.color, onChangeComplete: function (color) { return _this.onColorChange(color); } })))));
    };
    ColorPicker.defaultProps = {

_styledComponents.ButtonSearch,
              {
                innerRef: function innerRef(node) {
                  return _this3._buttonSearch = node;
                },
                fullBr: '4px',
                onClick: this.onApply,
                tabIndex: 10001
              },
              _reactI18nify.I18n.t('upload.apply')
            )
          ),
          displayColorPicker ? _react2.default.createElement(
            'div',
            { style: popover },
            _react2.default.createElement(_reactColor.SketchPicker, { color: activeColor, onChange: this.handleChange })
          ) : null
        )
      );
    }
  }]);

_ref$outerState$color = _ref.outerState.color,
      rgba = _ref$outerState$color.rgba,
      showPicker = _ref$outerState$color.showPicker,
      pickerDefaultPosition = _ref.pickerDefaultPosition;
  return _react2.default.createElement(
    _reactDraggable2.default,
    {
      handle: '.slate-color-plugin--draggable-handle',
      defaultPosition: pickerDefaultPosition,
      zIndex: 100
    },
    _react2.default.createElement(
      'div',
      { className: 'slate-color-plugin--draggable-handle-container' },
      _react2.default.createElement('div', { className: 'slate-color-plugin--draggable-handle' }),
      _react2.default.createElement(_reactColor.SketchPicker, {
        color: rgba,
        onChangeComplete: function onChangeComplete(color) {
          var rgbaChange = color.rgb;
          changeState({
            value: (0, _ColorUtils.colorMarkStrategy)({ value: value, rgba: rgbaChange }).value,
            color: { rgba: rgbaChange, showPicker: showPicker }
          });
        }
      })
    )
  );
};

background: knob.value
      };
      return _react2.default.createElement(
        'div',
        { id: knob.name },
        _react2.default.createElement(
          'div',
          { style: styles.swatch, onClick: this.handleClick },
          _react2.default.createElement('div', { style: colorStyle })
        ),
        this.state.displayColorPicker ? _react2.default.createElement(
          'div',
          { style: styles.popover, ref: function ref(e) {
              _this2.popover = e;
            } },
          _react2.default.createElement(_reactColor.SketchPicker, { color: knob.value, onChange: function onChange(color) {
              return _onChange(color.hex);
            } })
        ) : null
      );
    }
  }]);