How to use the reakit/Popover.usePopoverState function in reakit

export const ThemeColorPicker = ({ children, theme, ...props }) => {
  const popover = usePopoverState()
  const context = useEditor()
  const { colors } = theme || context.theme
  const value = colors[props.value] || props.value
  const options = [
    'transparent',
    ...Object.keys(colors)
      .map(key => colors[key])
      .filter(color => typeof color === 'string')
      .filter(color => /^#/.test(color)),
  ]
  const onChange = color => {
    const [key] =
      Object.entries(colors).find(
        ([k, v]) => tinycolor(v).toHexString() === color.hex
      ) || []

export const ColorPicker = ({ children, ...props }) => {
  const popover = usePopoverState()
  const hasChildren = !!children

  if (!hasChildren) {
    return 
  }

  return (
    
       <div>{children}</div>}
      /&gt;

export const Icon: FunctionComponent = () => {
  const {
    actions: {
      workspace: { editTemplate },
    },
    state: {
      editor: {
        currentSandbox: { customTemplate, template },
      },
    },
  } = useOvermind();
  const popover = usePopoverState();
  const [selectedIcon, setSelectedIcon] = useState(
    customTemplate.iconUrl || ''
  );

  const DefaultIcon = getIcon(template);
  const defaultColor =
    customTemplate.color || templates.default(template).color();

  const setIcon = (key: string) => {
    setSelectedIcon(key);

    popover.hide();

    editTemplate({ ...customTemplate, iconUrl: key });
  };
  const TemplateIcon = Icons[selectedIcon];

export const ColorPicker = ({ children, ...props }) => {
  const popover = usePopoverState()
  const hasChildren = !!children

  if (!hasChildren) {
    return 
  }

  return (
    
       <div>{children}</div>}
      /&gt;