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

import ColorInput from './ColorInput';
import { Themeable } from '../../types';
import SpectrumPalettePointer, { SpectrumPalettePointerProps } from './SpectrumPalettePointer';
import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/data';

export interface SpectrumPaletteProps extends Themeable {
  color: string;
  onChange: (color: string) => void;
}

const renderPointer = (theme: GrafanaTheme) => (props: SpectrumPalettePointerProps) => (
  
);

// @ts-ignore
const SpectrumPicker = CustomPicker(({ rgb, hsl, onChange, theme }) => {
  return (
    <div style="{{">
      <div style="{{">
        </div></div>

var CustomComponent: StatelessComponent = (props: CustomProps) => {
    function onChange (color: ColorResult) {
        console.log(color)
    }

    return (
        <div>
            
            
            
            
            
        </div>
    )
}
var Custom = CustomPicker(CustomComponent)

var colors: Array = ["#000", "#333"]

render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))
render(, document.getElementById("main"))

)}
          direction="horizontal"
        />
      
    )
  }
}

Gradient.propTypes = {
  /** onChange event */
  onChange: PropTypes.func,
  /** Pointer Hex Color */
  hex: PropTypes.string,
}

export default CustomPicker(Gradient)

className={cx('chrome-picker')}
                    color={hex}
                    disableAlpha
                    onChange={onChange}
                  />
                
              )}
            ,
            document.querySelector('#tooltip-root'),
          )}
      
    );
  }
}

export const ColorPicker = CustomPicker(ColorPickerComponent);

source: 'hex',
      },
      e
    )
  }

  const swatches = props.colors.map((c) => (
    <div>
      
    </div>
  ))

  return <div>{swatches}</div>
}

export default CustomPicker(ColorPicker)

import React, { Component } from 'react';
import get from 'lodash/get';
import { CustomPicker } from 'react-color';
import Slider from 'material-ui/Slider';
import Color from '../utils/color';
import AvatarComponent from 'material-ui/Avatar';
import TextField from 'material-ui/TextField';

export const Avatar = props => { props.children };


const WrappedPicker = CustomPicker( props => (
	<div>
		<div style="{">
		</div></div>

);
}

TieredColorPicker.propTypes = {
  color: PropTypes.string.isRequired,
  rgb: PropTypes.shape({
    r: PropTypes.number,
    g: PropTypes.number,
    b: PropTypes.number,
    a: PropTypes.number,
  }).isRequired,
  onChangeComplete: PropTypes.func.isRequired,
};

export default CustomPicker(TieredColorPicker);

const swatches = this.props.colors.map((c) => (
      <div>
        
      </div>
    ))

    return <div>{swatches}</div>
  }
}

export default CustomPicker(ColorPicker)

<div style="{popoverStyle}">
        <div style="{coverStyle}">
        <div style="{pickerStyle}">
          <div style="{saturationStyle}">
            
            <div style="{hueWrapperStyle}">
              
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default CustomPicker(ColorPicker)
</div>

/>
          
          <div>
            <div>
              <div>
                
              </div>
            </div>
          </div>
        
      
    );
  }
}

export default CustomPicker(ColorPicker, styles);